Question

$('.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;
                });

我似乎已经尝试过每次单击按钮时阻止事件加倍的事情。代码最初是在另一个函数中打开了一个“弹出式”样式框，但即使我将它移到函数外部，它仍然似乎会冒泡。

根据要求： -

$(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;
                });


            }

        }

Answer 1

问题是你不止一次连接事件处理程序。每次单击匹配'.bottom_links .lister a'的元素时，如果各种条件都正确，则重新运行此代码：

$('.add_instruction_btn').click(function(e){
    // ....
});

每次运行该代码时，都会挂钩处理程序的新副本。

如果修复了匹配'.add_instruction_btn'的元素集，只需将该代码移出click元素的'.bottom_links .lister a'处理程序。

如果匹配'.add_instruction_btn'的元素集不同，您仍然希望将代码移到click元素的'.bottom_links .lister a'处理程序之外，但您可能希望使用事件委派，也就像你使用'.bottom_links .lister a'一样。

关于事件委派的说明：您在document上“支持”您的事件委托，这真的非常高。最好将代表委托在最近的容器中，你可以使用你正在观看的元素。显然，如果document 是最近的容器，那么你就是，但通常情况下你可以使用更远的东西，同时仍然可以获得授权的好处。

Answer 2

尝试e.stopPropagation：

         $('.add_instruction_btn').click(function(e){
                e.preventDefault();
                e.stopPropagation(); 
                ....

JQuery事件每次都翻倍

2 个答案: