Question

我使用jQuery .on()方法将事件处理函数附加到id为“w1”的另一个div元素中的所有div元素，但在事件处理函数内部我想在ajax调用之前分离该事件并在ajax之后再次附加它完成了。这是一个简单的脚本

$(document).on("click", "#w1 div", function() {
    $(document).off("click","#w1 div");
    $.ajax({
        type: "POST",
        cache: false,
        url: "chtr.py",
        complete: function(){
            $(document).on("click","#w1 div"); //  does not work
        } 
    });
});

我不知道如何再次将事件处理函数重新附加到这些元素。

Answer 1

也许你应该只使用jQuery.one：

http://api.jquery.com/one/

描述：将处理程序附加到元素的事件。该每个元素最多执行一次处理程序。

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

所以你的代码可能如下所示：

var ajaxHandling = function() {
    $.ajax({
          type: POST,
          cache: false,
          url: "chtr.py",
          complete: function(){
             $(document).one("click", "#w1 div", ajaxHandling); 
           } 

    });
 }
 $(document).one("click", "#w1 div", ajaxHandling);

Answer 2

如果要附加相同的功能，则需要将其设为命名函数，以便再次引用它（或者可以将其分配给变量）：

$(document).on("click", "#w1 div", clickHandler);

function clickHandler() { 
    $(document).off("click","#w1 div");
    $.ajax({
          type: POST,
          cache: false,
          url: "chtr.py",
          complete: function(){
                $(document).on("click","#w1 div", clickHandler); 
           } 
    });
}

Answer 3

最好使用 FLAG ：

$(document).on("click", "#w1 div", function() {
    var $this = $(this);
    if ($this.data('in-progress')) {
        return false;
    }

    // set the flag to prevent furthur clicks
    $this.data('in-progress', true);

    $.ajax({
        type: 'POST',
        cache: false,
        url: "chtr.py",
        complete: function(){
            // here ajax is completed
            // set the flag back
            $this.data('in-progress', false);
        } 
    });
});

打开console并查看此FIDDLE DEMO。

jQuery - 处理函数内的off（）和on（）

3 个答案: