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

在处理动态添加的新DOM时，您应该使用事件委派 on() ：

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

注意：

您应该在id之前添加sel1选择器#sel1。
.val()是一种jquery方法，您无法在this.val()等javascript对象上调用它，它应该是$(this).val()。

当前代码不会在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>');

希望这有帮助。

工作代码段

＆＃13;

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);

＆＃13;

td{
  border: 1px solid;
}

＆＃13;

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

＆＃13;

Answer 2

您的代码中需要注意的几点要点

1） 错误的选择器$("sel1")

您的代码中的问题是$("sel1")，您需要使用#按ID进行选择，因此它应为$("#sel1")。所以你的代码就像

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

2） 将HTML附加到DOM或使用事件委派后绑定事件 您的代码应按此顺序放置 Working Fiddle

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

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

table.append(row);

$('#mydiv').append(table);// now the element is added to DOM so bind event

$("#sel1").on('change', function() {
  alert($(this).val()); // note here I changes this.val() to $(this).val()
});

或另一个选项是使用事件委派 Working Fiddle

要将事件添加到动态元素，请使用事件委派

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

3） 要将选择标记放在td中，请使用以下语法

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

将td与select标记一起包裹，而不是在tr Working Fiddle

内

Answer 3

您需要在追加到页面后绑定更改事件：

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

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

table.append(row);

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

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

你也忘记了“sel1”的#id选择器

Answer 4

您的代码中存在三个主要问题

1. id选择器必须以#

开头

$("#sel1").on('change', function() {

2.您应该在之后绑定更改侦听器，因为它在DOM之前不存在

3，具有

$('<tr><td></td></tr>')

您将获得对该行（<tr>元素）的jquery引用。然后使用.html()替换行的内容（当然包括<td>）

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

4 个答案:

工作代码段