Dynamically adding event handler to select box
<p>I'm trying to dynamically add an event listener to a select box.</p>

<p>With this code I just don't get any response, so no alert box:</p>

<pre><code>var table = $('&lt;table&gt;&lt;/table&gt;');

var row = $('&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;').html('&lt;select id="sel1"&gt;&lt;option&gt;test&lt;/option&gt;&lt;option&gt;test2&lt;/option&gt;&lt;/select&gt;');

$("sel1").on('change', function() {
  alert(this.val());
});

table.append(row);

$('#mydiv').append(table);
</code></pre>

<p>Also, how can I add the select box between the <code>td</code>?  </p>

<p>Currently, it's added between the <code>tr</code>, <code>td</code> simply isn't there.</p>

<p><strong><a href="https://jsfiddle.net/pq2no59r/" rel="nofollow">Here is a fiddle</a></strong></p>