jquery - 附加选择的 Change() 不起作用

Question

我有 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 上的值时，字符串“change”不显示在控制台中。谁能帮我？

<小时/>

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

Answer 1

这里的问题是因为 change() (以及所有其他事件处理程序快捷方式)在页面加载时绑定(bind)，但您的元素是在此之后动态添加的。相反，您需要在附加事件后使用 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，如果多次附加，该 ID 很容易被复制，从而导致页面无效。