javascript - jQuery 未触发 () 更改

Question

我有一个 ajax 调用，它返回一个带有选择下拉列表的 JSON 对象，如下所示:

{
    "responseCode": 200,
    "field_value": "1",
    "field_options": {
        "175": "Incorrect Listing",
        "176": "High Return Rate",
        "177": "Easily Damaged"
    },
    "selectOptions": "<select id=\"do_not_order_options_102450\" class=\"input-medium\"><option value=\"\">Choose Option<\/option><option value=\"175\">Incorrect Listing<\/option><option value=\"176\">High Return Rate<\/option><option value=\"177\">Easily Damaged<\/option><\/select>"
}

在我的页面上，我输出选择下拉列表。 (顺便说一句，我的页面上有很多这样的内容。)

在我的 jQuery 脚本中我进行了这样的设置:

 $(function(){
        $('select[id^="do_not_order_options_"]').on("change",function(){
            alert(1);
        });
 });

当我选择一个选项时它没有触发...有人知道可能是什么问题吗？

谢谢!

Answer 1

您引用的代码将为当时存在的匹配选择框连接事件处理程序。但是，如果您向页面添加更多内容，则它们的 change 事件不会被 Hook 。

您可能想查看事件委托(delegate):

$(function() {
    $('some container all these selects share').on('change', 'select[id^="do_not_order_options"]', function() {
        // Handle change
    });
});

jQuery ensures that the change event bubbles ，因此我们可以将其挂接到容器元素上，并使用 jQuery 的帮助来仅针对匹配元素(在本例中为选择)触发我们的处理程序。

由于我们将事件挂接到容器上，因此在容器内添加更多选择会使它们神奇地工作。