Question

我在更改select元素时使用了jQuery函数：

$("#category").change(function(){
    $("table[id=advance_search]").append("<tr id='item_type'></tr>");
    $("tr[id=item_type]").append("<td class='field_input'><select id='type'><option value='1'>One<option><option value='2'>Two<option></select></td>");
});

$("tr[id=item_type]").children(".field_input").delegate("select[id=type]", "change", function() {
    console.log("change");
});

当我更改select#type上的值时，字符串“更改”不会显示在控制台中。谁能帮我？

已编辑，用于添加<td class='field_input'>作为$("tr[id=item_type]")

的子项

Answer 1

这里的问题是因为change()（以及所有其他事件处理程序快捷方式）在页面加载时绑定，但在此之后动态添加了您的元素。相反，您需要使用delegate()在事件附加后将事件附加到此元素。

$("tr[id=item_type]").delegate("select[id=type]", "change", function() {
    console.log("change");
});

或者，如果您使用的是jQuery 1.7+，则可以使用on()：

$("tr[id=item_type]").on("change", "select[id=type]", function() {
    console.log("change");
});

您可能希望修改此处附加的select元素，因为它有一个ID，如果多次附加，可能很容易重复，这会导致页面无效。

Answer 2

您需要订阅on()函数，因为当您订阅change元素时，DOM中不存在该元素，而jQuery无法找到它。

$("select[id=type]").on('change', function(){
     console.log("change");
});

Answer 3

因为您动态添加它，您必须使用live或delegate事件

$("select#type").live('change', function() {
    console.log('change');
});

Answer 4

试试这个：

$("select[id=type]").on("change",function(){
    console.log("change");
});

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

源：http://api.jquery.com/live/

附加选择的change（）不起作用

4 个答案: