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）。在 - 你可以添加元素的DOM，仍然處理單擊事件。

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 ..