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"); // 
  });

我会在函数外添加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"); // 
       });
    });
});

An example using span

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

更新

以下内容可以替换live。您可以使用父包装而不是document，read more。

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

JavaScript堆栈执行问题

2 个答案:

更新