jquery - jQuery - 处理函数内部的 off() 和 on()

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。