javascript - 多个更改事件

Question

我有 3 <select>菜单，每个菜单都有针对它们的更改事件。代码分解如下所示:

$(document).ready(function(){
    // some code

    $("#selectOne").change(function() {
        // some code inc ajax request

        $("#selectTwo").change(function() {
            // some code inc a different ajax request
        });

        $("#selectThree").change(function() {
            // some code inc a yet another ajax request

        });
    });
});

上面的问题是，虽然 selectOne 工作正常，selectTwo 似乎也工作正常，但如果我更改 selectThree，则 selectTwo 和 selectThree 的代码会同时触发。根据 3 个选择中任何一个的选择顺序，selectThree.change 的响应可以是显示和隐藏之前的每个响应，然后再决定显示不正确的响应。

我想做的是:

$(document).ready(function(){
    // some code

    $("#selectOne").change(function() {
        // some code inc ajax request
    });

    $("#selectTwo").change(function() {
        // some code inc a different ajax request
    });

    $("#selectThree").change(function() {
        // some code inc a yet another ajax request

    });
});

在这种情况下，selectOne 工作正常，但 selectTwo 和 selectThree 不响应更改。

有没有办法纠正其中的任何一个，以便在更改每个元素时，只触发正确的更改事件？

Answer 1

当您的文档加载时，似乎没有 id 为“selectTwo”或“selectThree”的选择元素。同样在第一种情况下，“selectOne”的事件处理程序执行时没有“selectThree”。这就是相应事件处理程序不执行的原因。有两种方法可以解决这个问题。

1 - 在创建元素时分配处理程序。

2 - 使用 .on() 而不是 .change():

$('body').on("change", "#selectOne", function () {});

$('body').on("change", "#selectTwo", function () {});

$('body').on("change", "#selectThree", function () {});