jQuery：锚类单击多次触发

Question

我是jquery新手。 我希望在锚点单击时克隆一个具有新ID的div。 但是，当我单击锚元素时，div被克隆了多次。

码：

$(document).on("click", "a.cls-copy", function(event){
               event.stopPropagation();
               div_id = $(this).closest('div').attr('id');
               var newdiv = $("#"+div_id).clone(true).attr('id',"newQuestionsDiv-Page"+countPage+"-"+questionCount).insertAfter("#"+div_id);
               console.log("newdiv : "+$(newdiv).attr('id'));
               if($(newdiv).find(".questiondata").length != 0)
               {
               $(newdiv).find(".questiondata").val("");
               }

               e_id = "edit"+countPage+"-"+questionCount;
               var temp_id= $(newdiv).attr('id');

               d_id = "del"+countPage+"-"+questionCount;
               c_id = "copy"+countPage+"-"+questionCount;
               questionCount++;

               showSuccessToast("Your question is copied");
               $("#"+temp_id).find(".cls-edit").attr('id',e_id);
               $("#"+temp_id).find(".cls-delete").attr('id',d_id);
               $("#"+temp_id).find(".cls-copy").attr('id',c_id);

               });

html

html+='<li><a data-role="button" class="km-widget km-button cls-delete" type="button" id="'+del_id+'" ><span class="km-text">delete</span></a>&nbsp;&nbsp;<a data-role="button" class="km-widget km-button cls-copy" type="button" id="'+copy_id+'"><span class="km-text">copy</span></a>&nbsp;&nbsp;<a data-role="button" class="km-widget km-button cls-edit" type="button" id="'+edit_id+'"><span class="km-text">edit</span></a></li>';

我哪里出问题了？ 我该如何解决？

Answer 1

找到了解决方案：

 $(document).off("click","a.cls-copy").on("click", "a.cls-copy", function(event){
               event.stopPropagation();
               div_id = $(this).closest('div').attr('id');
               var newdiv = $("#"+div_id).clone(true).attr('id',"newQuestionsDiv-Page"+countPage+"-"+questionCount).insertAfter("#"+div_id);
               console.log("newdiv : "+$(newdiv).attr('id'));
               if($(newdiv).find(".questiondata").length != 0)
               {
               $(newdiv).find(".questiondata").val("");
               }

               e_id = "edit"+countPage+"-"+questionCount;
               var temp_id= $(newdiv).attr('id');

               d_id = "del"+countPage+"-"+questionCount;
               c_id = "copy"+countPage+"-"+questionCount;
               questionCount++;

               showSuccessToast("Your question is copied");
               $("#"+temp_id).find(".cls-edit").attr('id',e_id);
               $("#"+temp_id).find(".cls-delete").attr('id',d_id);
               $("#"+temp_id).find(".cls-copy").attr('id',c_id);

               });

有了这段代码，

1）.on-您可以将元素添加到DOM并仍然处理click事件。

2）.off-删除事件处理程序

请参阅http://www.gajotres.net/prevent-jquery-multiple-event-triggering/

Answer 2

   $(document).ready(function(){

        $("a.cls-copy").unbind('click').bind("click", function(event){
           alert("test");
           event.stopPropagation();
           div_id = $(this).closest('div').attr('id');
           var newdiv = $("#"+div_id).clone(true).attr('id',"newQuestionsDiv-Page"+countPage+"-"+questionCount).insertAfter("#"+div_id);
           console.log("newdiv : "+$(newdiv).attr('id'));
           if($(newdiv).find(".questiondata").length != 0)
           {
           $(newdiv).find(".questiondata").val("");
           }

           e_id = "edit"+countPage+"-"+questionCount;
           var temp_id= $(newdiv).attr('id');

           d_id = "del"+countPage+"-"+questionCount;
           c_id = "copy"+countPage+"-"+questionCount;
           questionCount++;

           showSuccessToast("Your question is copied");
           $("#"+temp_id).find(".cls-edit").attr('id',e_id);
           $("#"+temp_id).find(".cls-delete").attr('id',d_id);
           $("#"+temp_id).find(".cls-copy").attr('id',c_id);

           });
     });
  Replace your code with above code and check how much time test alerts ..