Question

我需要什么

当点击事件被触发时，进行服务呼叫，然后它只能调用一次。

用例

Dropdown1

Dropdown2

Dropdown3

        1. There are three dropdown in html page.
        2. when dropdown 1 is call - ajax call made only 1 time.
        3. when dropwdown 2 is call -ajax call made only 1 time.
        4. when dropwdown 3 is call -ajax call made only 1 time.

现在用户更改下拉列表1。

        5. when dropwdown 1 is call -ajax call made only 1 time.

出现问题

        6. Now when dropwdown 2 is call -ajax call made only 2 time.
        7. Now when dropwdown 3 is call -ajax call made only 2 time.

当我们更改下拉列表时

相似

        count increase by one.

现在用户更改下拉列表1。

        8. Now when dropwdown 2 is call -ajax call made only 3 time.
        9. Now when dropwdown 3 is call -ajax call made only 3 time.

Js代码

dowpdown 1已使用dowpdown_1
分配了ID
dowpdown 2已使用dowpdown_2
分配了ID
dowpdown 3已使用dowpdown_3
分配了ID

$("#dowpdown_1").change(function() {
  $.ajax({
    url: 'path',
    cache: false,
    data: {
      data
    },
    success: function(html) {
      console.log('dowpdown_1');
      $("#dowpdown_2").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_2');
          }
        });
      }
      $("#dowpdown_3").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_3');
          }
        });
      });
    }
  });
});

非常欢迎任何解决方案。

Answer 1

每次更改dropdown_1时，您都会向dropdown_2和dropdown_3添加一个新事件来执行相同操作。

看起来这可能是同一个事件，但您实际上是将新的更改事件绑定到您的下拉菜单。

你可以只绑定一次事件，或者如果你想要你以前的结构（看起来像级联功能，但我不确定），你可以使用它：

$("#dowpdown_2").off().on('change', function () {// do the ajax});

$("#dowpdown_3").off().on('change', function () {// do the ajax});

这样，每次在更改事件上添加新函数时，您至少会解除之前所有事件的绑定，并且不会再次触发。当然，这意味着没有任何其他更改事件对您的案例很重要，因为它们也会被解除绑定。

另外，正如我所说，你可以这样做

$("#dowpdown_1").on('change', function () 
{
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
      console.log('dowpdown_1');
    }
});

$("#dowpdown_2").on('change', function () {
        $.ajax({
        url: 'path',
        cache: false,
        data: {data},
        success: function (html) 
        {
            console.log('dowpdown_2');
        }
});
$("#dowpdown_3").on('change', function () {
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
        console.log('dowpdown_3');

    }
});

Answer 2

每次你的ajax完成后，你的回调会将新事件附加到你的其他2个下拉列表中。这意味着每次在ajax回调中绑定一个事件时，你必须关心一个元素是否存在或者它是否是新建的。

TLDR在你的活动前添加.unbind应该解决这个问题

$("#dowpdown_2").unbind().change(function () {
....
})

如何避免多个Ajax调用

2 个答案: