JQuery 事件每次翻倍

JQuery event doubling each time

本文关键字:事件 JQuery      更新时间:2023-09-26
$('.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(); 
                ....