Question

我希望做到以下几点：创建一个列表（ul和li）。然后在ul点击，我想根据条件插入div，即如果选择checkbox，则创建一个带有4个复选框的div。

如果从列表中选择radio，则会创建一个带有4个无线电的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 );}

现在的问题是，当我点击列表checkbox中的for first time时，myhandler未被调用。

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

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

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

请让我知道如何解决这个问题。

已编辑：

我在#id-ul点击之外移动了以下2行。

$( "#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 );

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

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

2 个答案: