javascript - 动态添加事件处理程序到选择框

Question

我正在尝试将事件监听器动态添加到选择框。

使用此代码我只是没有得到任何响应，因此没有警报框:

var table = $('<table></table>');

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

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

table.append(row);

$('#mydiv').append(table);

另外，如何在 td 之间添加选择框？

目前，它添加在 tr 之间，td 根本不存在。

<强> Here is a fiddle

Answer 1

<强> Updated Fiddle

您应该使用事件委托(delegate) on() 当你处理动态添加的新 DOM 时:

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

注释:

1. 您应该在 sel1 之前添加 id 选择器，它应该是 #sel1。
2. .val() 是一个 jquery 方法，你不能在像 this.val() 这样的 javascript 对象上调用它，它应该是 $(this) .val().

3. 当前代码不会在 td 内添加 select，而是直接将其添加到 tr 标记内，以便您可以替换:

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

   作者:

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

希望这有帮助。

<小时/>

工作片段

var table = $('<table></table>');

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

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

table.append(row);

$('#mydiv').append(table);

td{
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>