javascript - JavaScript 堆栈执行问题

Question

我的功能有什么问题？为什么它打印多次而不是一次？

$('document').ready(function(){

    //click a button dozen times it invokes submit and write message in console.log
    $('button').live('click', function(){ 
       $this = $(this);
       submit($this); //this function maybe push in stack a lot of times 
   });

});

function submit($this){
   img = $this.nextAll(".submit");

   // and when I click on image it must write one time but it writes a lot of times                                   
   img.on('click', function(){                      
      console.log($this.text() + " ----> click"); // 
   });
}

Answer 1

看起来问题在于每次调用函数时将 click 事件绑定到 img ，但您永远不会删除它。

  // and when I click on image it must write one time but it writes a lot of times                                   
  img.on('click', function(){                      
     console.log($this.text() + " ----> click"); // 
  });

我会在函数之外添加点击事件。

Answer 2

你不应该使用live，它已被弃用，你可以这样写

$(document).ready(function(){
    $(document).on('click', 'button', function(){ 
       img = $(this).nextAll(".submit");
       img.off('click').on('click', function(){                      
           console.log($(this).text() + " ----> click"); // 
       });
    });
});

使用 span 的示例。

使用off取消注册之前添加的click事件，这样它只会触发一次。

更新：

以下可以替换live。您可以使用父包装器代替document，阅读更多。

$(document).on('click', 'button', function(){ ... });