1

我有 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 不响应更改。

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

4

1 回答 1

2

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

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

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

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

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

$('body').on("change", "#selectThree", function () {});
于 2012-10-08T08:46:50.933 回答