[英]jquery: anchor class click fired multiple times
我是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> <a data-role="button" class="km-widget km-button cls-copy" type="button" id="'+copy_id+'"><span class="km-text">copy</span></a> <a data-role="button" class="km-widget km-button cls-edit" type="button" id="'+edit_id+'"><span class="km-text">edit</span></a></li>';
我哪里出問題了? 我該如何解決?
找到了解決方案:
$(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/
$(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 ..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.