jQuery：在事件处理程序上多次调用

Question

我希望执行以下操作：创建一个列表（ul和li）。 然后在ul上单击，我要根据条件插入div ，即如果checkbox ，则创建带有4个复选框的div 。

如果从列表中选择了radio ，则将使用4个radio创建一个div 。

以下是我的jQuery代码：

var addDiv=document.createElement("div");

  $("#id-ul").click(function(){$('#sidr-bottom').hide();
   var div_id=0;
   addDiv=document.createElement("div");
   $( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler );
   $( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio );
   addDiv.id = "div_multi"+div_id; ...

复选框处理程序：

function myHandler( event ) {
   alert("check : "+ event.data.divId );}

无线电处理程序：

function myHandlerRadio( event ) {
    alert("radio:"+ event.data.divId );}

现在的问题是，当我for first time单击列表中的checkbox for first time ，不会调用myhandler 。

当我再次单击它时，处理程序将被调用一次。

当我再次单击它时，处理程序将被调用两次。

这种奇怪行为的原因是什么？

请让我知道我该如何解决。

编辑：

我将以下2行移到#id-ul点击之外。

$( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler ); $( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio ); 我仍然面临同样的问题。

Answer 1

这是因为每次单击#id-ul都会分配事件处理程序。

请将您的事件移到事件处理程序之外。

Answer 2

问题在于您要添加处理程序而无需清除它们。 你应该做这个：

   $( "#A_MULTI" ).off("click").on( "click", { divId:addDiv }, myHandler );
   $( "#A_RADIO" ).off("click").on( "click", { divId:addDiv }, myHandlerRadio );

在分配新的处理程序之前删除旧的处理程序。