javascript - 禁用旧按钮上的功能

Question

在我的项目中，我想以编程方式添加某些元素 buttons ，因为每次都有新的button添加了，对旧的button的相同函数的调用加倍.

var btnElem ='<button type="button"class="doSomething">Button</button><br>';


function ActiveFunc(){
  $('.doSomething').on('click',function(){  
    alert('Clicked');
  });
}

$('#Add_Btn').on('click',function(){  
  $('#div_').append(btnElem);
  ActiveFunc();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

我想禁用对函数的重复调用，我想让所有按钮仅调用该函数一次，知道吗？

注意:直接声明功能对于以编程方式添加的按钮不起作用。

Answer 1

这是因为您每次添加按钮时都会添加事件监听器。

我会建议 1 个事件监听器，如下所示:

var btnElem = '<button type="button"class="doSomething">Button</button><br>';

$('body').on('click', '.doSomething', function() {
  alert('Clicked');
});

$('#Add_Btn').on('click', function() {
  $('#div_').append(btnElem);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>