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">时，我对'single-location.php'有3个AJAX请求。

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

我在实际示例中做了一个fiddle example，但是小提琴却按预期工作：当多次更改Doctor字段，然后更改Location字段时，控制台显示只有一个请求，即我期望的是

我的真实示例就像小提琴一样，只是在医生的<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

代码正在按照您的要求执行（关于代码的有趣事情-似乎所有发生的“神秘”事情都与编码错误有关...：）

这些检索到的位置然后填充一个字段。

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

您的解决方法似乎是做您想要的事情的好方法。

另一种方法是仅在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();}
});

这只是快速的示例代码（即，它将无法工作...。），因为您的展示不足以让我给您“工作”的东西，但是它应该给您一些有关如何处理的想法这-“问题”在哪里。

使用AJAX

1 个答案: