title: Bad event binding in jQuery
body: <p>I did sorting and searching data row on a data-table. Also, when clicking on data-row, it alerts its name and code of data-row. Someone gave a comment on my code: &quot;the event binding is bad and weak!&quot;. I got this comment in an interview so I didn't get the chance to ask why. I hope someone can figure out what the problem is.</p>
  <pre><code>&lt;!--HTML--&gt;
  &lt;table class=&quot;&quot; id=&quot;tabCountryList&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class=&quot;&quot; tabindex=&quot;&quot;&gt;Name&lt;/th&gt;
              &lt;th class=&quot;&quot; tabindex=&quot;&quot;&gt;Code&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id=&quot;tbCountryListContent&quot;&gt;       
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;!--javascript--&gt;
  var tbContent=&quot;&quot;;
  for(var idx in countries){
      tbContent+=&quot;&lt;tr class='countryRow'&gt;&lt;td&gt;&quot;+countries[idx].name+&quot;&lt;/td&gt;      
      &lt;td&gt;&quot;+countries[idx].code+&quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
  }
  document.getElementById(&quot;tbCountryListContent&quot;).innerHTML=tbContent;
  $(document).ready(function(){
      $(&quot;#tabCountryList&quot;).DataTable({&quot;responsive&quot;: true, &quot;dom&quot;:     
      '&lt;&quot;toolbar&quot;&gt;frtip',&quot;displayLength&quot;: 4 ,&quot;aaSorting&quot;: []});
      $(&quot;.countryRow&quot;).click(function() {
          var tempObj = $(this).find(&quot;td&quot;);
          alert(tempObj[0].innerHTML);    
      });
      $(&quot;.toolbar&quot;).hide();
  });
  </code></pre>
  <p>Here is the resulting image:</p>
  <p><img src="https://i.stack.imgur.com/cDCGo.png" alt="The image of result" /></p>