代码之家  ›  专栏  ›  技术社区  ›  Ivan

使用ajax时多次触发更改事件

  •  1
  • Ivan  · 技术社区  · 7 年前

    我有一些医生 <select id="doctors"> 字段。
    更改时,将触发ajax请求,拉取与所选用户相关的位置。
    这些检索到的位置然后填充 <select id="locations"> 字段。
    再一次,在这一秒的变化 <select> 触发ajax请求 'single-location.php' 页面来检索单个位置的数据。

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

    问题是改变 <选择id=“locations”> 字段触发器 N ajax请求,其中 n个 <选择id=“Doctors”> 字段。

    也就是说,如果我改变了 <选择id=“Doctors”> 字段3次,更改时 <选择id=“locations”> 我有3个ajax请求 '单个位置.php' .

    医生领域的10个变化?确保“位置更改”字段将触发10个ajax请求 '单个位置.php' .

    我做了一个 fiddle example 与我的实际例子很接近,但小提琴的工作原理与预期一样:当更改医生字段几次,然后更改位置字段时,控制台显示只有一个请求,这就是我所期望的

    我真正的例子和小提琴一样,除了医生的 <选择> 我有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个 时间取决于另一个不应该直接相关的字段上的更改?

    谢谢

    1 回复  |  直到 7 年前
        1
  •  1
  •   Apps-n-Add-Ons    7 年前

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

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

    这将触发“on change”代码-当您“populate”时,这是一个更改…

    你的变通方法看起来是一个很好的方式做你想做的。

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

    这只是一个简单的示例代码(即,它不会工作……),因为你没有足够的展示给我,让我给你“工作”的东西,但它应该给你一些想法,如何处理这一点,以及“问题”在哪里。