Question

我有选择框，在页面加载所选项目后更改（通过ajax调用）并且我需要捕获此事件，所以我添加了这个;

 $(document).ready(function() {
                document.getElementById("mySelectBox").addEventListener("change", function() {
                    debugger
                }, true);
            })

并且预期当所选项目更改为异步时它会触发并进入侦听器内部的函数，但它不是......

这可以使用setTimeOut函数解决，但它很难看，因为你知道可能有副作用。

setTimeout(function(){*business logic*},2000)

Answer 1

如果要使用AJAX动态添加元素，请使用on()方法。假设有一个div（the-parent-div），其中包含#mySelectBox：

$(document).ready(function() {
    $('the-parent-div').on('change', '#mySelectBox', function(){
         //Your actions go here
    });
});

<强>更新您可能指的是ajax调用的异步性质。请参阅此Question和已接受的Answer：

....... Ajax中的 A 代表asynchronous。这意味着发送请求（或者更确切地说是接收响应）被取出正常的执行流程。在您的示例中，$.ajax返回立即执行下一个语句return result; 在您传递的函数之前，success回调甚至被调用。 .....

Answer 2

代码末尾的

缺少一个

Answer 3

首先，您的代码中有拼写错误。你最后忘记了)，但我认为这是一个转录错误。

当用户界面用于更改表单控件时，将触发更改事件。

您说“当所选项目更改为异步”时，这意味着您正在使用JavaScript而非用户交互事件更改表单控件。

这不会触发事件。

您可以手动调用该功能......

 $(document).ready(function() {
     function changefunction() {
         debugger
     }
     document.getElementById("mySelectBox").addEventListener("change", changefunction, true);
     do_something_to_change_mySelectBox();
     changefunction.call(document.getElementById("mySelectBox"));
 });

...或者使用jQuery的事件抽象功能。这需要您使用jQuery绑定事件句柄。

 $(document).ready(function() {
     $("#mySelectBox").on("change", function() {
         debugger
     });
     do_something_to_change_mySelectBox();
     $("#mySelectBox").trigger("change");

 });

addEventListener不会触发元素的change事件

3 个答案: