JQuery 事件每次翻倍
JQuery event doubling each time
$('.add_instruction_btn').click(function(e){
e.preventDefault();
var ins_content=$('#add_instructions').val();
var id=$('.useri').val();
if(ins_content!="")
{
//write new instructions to database
var id=$('.useri').val();
var data="job_id="+job_idx+"&ins="+ins_content+"&client_id="+id+"&key=2";
$.ajax({
type:"POST",
url:"admin_includes/get_instructions.php",
data:data,
success:function(html2){
alert(html2);
}
});//end ajax
}
return false;
});
我似乎已经尝试过 evrything 来阻止每次单击按钮时事件加倍。代码最初在另一个函数中,该函数打开了一个"弹出"样式框,但即使我将其移动到函数之外,它似乎仍然会冒泡。
根据要求:-
$(document).on('click', '.bottom_links .lister a', function(e){
//e.preventDefault();
//e.stopPropagation();
$('.ind_ins').text("");
var ident=$(this).data('ref1');
if(ident==1){
var job_idx=$(this).data('job_id');
var cl_name=$(this).data('cl_name');
var icon_stat=$(this).data('img_id');
var id=$('.useri').val();
if(icon_stat=="1")
{
$('.opaque_scr,.instruction_popup').css('visibility', 'visible');
$('.instruction_popup h2').html("Add Instructions for Appointment ID: "+job_idx);
$('.client_name').html("<strong>Client Name: </strong>"+cl_name);
//get original instructions
var get_job="job_id="+job_idx+"&key=1";
$.ajax({
type:"POST",
url:"admin_includes/get_instructions.php",
data:get_job,
success:function(html){
var split_data=html.split("^");
var split_data_count=split_data.length-1;
var ins_tb="<table width='100%'>"
for(var xs=0;xs<split_data_count;xs++)
{
var ind=split_data[xs].split("|");
var ind_count=ind.length-1;
for(var xx=0;xx<ind_count;xx++)
{
ins_tb+="<tr><td width='75%'>"+ind[0]+"</td><td>"+ind[1]+"</td></tr>";
}
}
ins_tb+="</table>";
$(ins_tb).appendTo('.ind_ins');
}
})//end ajax
$('.add_instruction_btn').click(function(e){
e.preventDefault();
e.stopPropagation();
var ins_content=$('#add_instructions').val();
var id=$('.useri').val();
if(ins_content!="")
{
//write new instructions to database
var id=$('.useri').val();
var data="job_id="+job_idx+"&ins="+ins_content+"&client_id="+id+"&key=2";
$.ajax({
type:"POST",
url:"admin_includes/get_instructions.php",
data:data,
success:function(html2){
alert(html2);
}
});//end ajax
}
return false;
});
}
}
问题是您多次挂接事件处理程序。每次单击与'.bottom_links .lister a'
匹配的元素时,只要各种条件正确,请重新运行以下代码:
$('.add_instruction_btn').click(function(e){
// ....
});
每次运行该代码时,都会挂接处理程序的新副本。
如果与'.add_instruction_btn'
匹配的元素集是固定的,则只需将该代码移出'.bottom_links .lister a'
元素的click
处理程序即可。
如果与'.add_instruction_btn'
匹配的元素集有所不同,您仍希望将代码移动到'.bottom_links .lister a'
元素的click
处理程序之外,但您可能也希望使其使用事件委托,就像处理'.bottom_links .lister a'
一样。
的说明:你正在将你的事件委托"生根"在document
上,这真的非常高。最好将委派根到离您正在监视的元素最近的容器中。显然,如果document
是最近的容器,那么,你就是这样,但通常你可以使用更远的东西,同时仍然可以获得委派的好处。
尝试e.stopPropagation
:
$('.add_instruction_btn').click(function(e){
e.preventDefault();
e.stopPropagation();
....
相关文章:
- 选择onclick事件jquery
- 用于多个类事件Jquery的单个函数
- 激发滑块's幻灯片事件jquery ui
- 设置重复按钮以注册点击事件jquery
- 保留当前点击事件jquery
- 启动/停止按键事件jquery
- 在事件jquery中插入一个函数
- 删除克隆的事件JQuery
- typeahead选择事件(jQuery)的动态绑定
- 触发自定义事件 Jquery
- 绑定两次或更多次的事件 jquery
- 单击时的事件 jquery 不起作用
- 在鼠标悬停事件 jquery 上显示边框的内容
- 同时触发两个鼠标事件 jQuery
- 焦点事件 jquery 组合框/自动完成
- 如何在页面中捕获“正文”和“正文”事件[Jquery].
- 将对象传递给事件 jQuery
- 验证“取消”上的字段 单击Onbeforeunload事件JQUERY
- 复选框单击事件 jQuery 不起作用
- 口述事件jquery顺序