javascript - 使用 AJAX 时多次触发更改事件

Question

我有一些医生在 <select id="doctors">字段。
在更改时，会触发 AJAX 请求，提取与所选用户相关的位置。
这些检索到的位置然后填充 <select id="locations">领域。
同样，关于这一秒的变化 <select>触发对 'single-location.php' 的 AJAX 请求检索页面……好吧，单个位置的数据。

简而言之，它是经典父子下拉列表的一个版本。

问题是改变 <select id="locations">字段触发 N 个 AJAX 请求，其中 N 是 <select id="doctors"> 中的更改次数字段。

即，如果我改变了 <select id="doctors">字段 3 次，更改时 <select id="locations">我有 3 个 AJAX 请求 'single-location.php' .

医生领域的10个变化？确保位置字段的更改将触发 10 个 AJAX 请求到 'single-location.php' .

我做了一个fiddle example接近我的真实示例，但 fiddle 按预期工作:当更改 doctors 字段几次然后更改 locations 字段时，控制台显示只有一个请求，这正是我所期望的

我的真实例子就像 fiddle 一样，除了医生的<select>我有 select2 插件，AJAX 请求当然是真实的。

深入挖掘，似乎问题出在功能上:

$('#locations').on('change', function(){
    getLocationData();
});

或者，更好的是，在 change 中事件，被触发不止一次，与 AJAX 请求本身无关。事实上，如果我改变:

$('#locations').on('change', function(){
    console.log('changed…');
});

消息被记录 N 次。

我发现的解决方法是添加 .off()像这样的方法:

$('#locations').off().on('change', function(){
    getLocationData();
});

但问题是:为什么它会这样工作？为什么更改事件会根据不应直接相关的另一个字段上的更改触发 N 次？

谢谢

Answer 1

代码正在做你告诉它做的事情(关于代码的有趣的事情 - 似乎所有发生的“神秘”事情都与编码错误有关......:)

These retrieved locations then populate a field.

这会触发“更改时”代码 - 当您“填充”时，这是一个更改....

您的变通办法看起来是执行您想要的操作的好方法。

另一种方法是仅在 ajax 完成时添加“on change”。有点像……

$.post('link', function(){
    //populate the 'locations' select and add the .change
    $("#locations").add(NOTE: however you are populating it - you should show the code....)
        .change(function(){
        getLocationData();}
});

这只是简单的示例代码(即，它不会工作....)因为你没有展示足够多的东西让我给你“工作”的东西，但它应该给你一些关于如何处理的想法这 - 以及“问题”所在。