title: Javascript table row click doesn't work after partial view gets refreshed
body: <p>I have a simple page that displays a table of items in a partial view. </p>
  
  <pre><code>&lt;div id="divList"&gt;
      @Html.Action("_list")
  &lt;/div&gt;
  </code></pre>
  
  <p>_list.cshtml displays a list of items:</p>
  
  <pre><code>&lt;table id=tblList"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;List&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr id="1"&gt;
              &lt;td&gt;ItemName1&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr id="2"&gt;
              &lt;td&gt;ItemName2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In the main page, I have the following javascript so that I can get the ID of the selected row:</p>
  
  <pre><code>$('#tblList tr').click(function () {
      alert($(this).attr("id"));
  });
  </code></pre>
  
  <p>The above code works but it doesn't work after the partial view gets refreshed. So I did some research and figured that I need something like:      </p>
  
  <pre><code>$('#tblList').on('click', 'tr', function () {
      alert("row clicked");
      alert($(this).attr("id"));
  });
  </code></pre>
  
  <p>But I've tried many ways and combinations and I can't get it to work.. What am I missing?
  I've tried this <a href="https://stackoverflow.com/questions/22619012/detect-click-on-table-row-from-generated-table-with-jquery">solution</a> but it didn't work either.</p>
  
  <pre><code>$('document').on('click', '#tblList tr', function () {
      alert("row clicked");
      alert($(this).attr("id"));
  });
  </code></pre>