账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    求助, 关于jQuery 绑定click事件重叠的疑问。
    37
    0

    最近正在做一个php的项目, 一个订单管理的系统,根据业务需求,每条订单显示的表格又一个修改按钮,按钮的id属性动态生成, 这个修改按钮的作用就是点击之后会弹出一个bootstrap的模态框, 模态框显示该订单的所有信息,并对可修改项提供修改功能,当进入订单页面主页的时候, 点击每个订单的修改按钮模态框都可以正常弹出, 问题出现在新加了订单搜索功能之后, 搜索出来的订单的修改按钮点击的时候模态框弹出背景的黑色会比在订单页面直接点击弹出的模态框背景颜色更深(怀疑重叠了),当连续点击几次搜索按钮之后, 搜索出的同一个订单的修改按钮点击之后,模态框就无法正常弹出了,取而代之的是只有透明黑色的背景。

    //这是搜索按钮所绑定的click事件
    $('#odrSearch').click(function() {
        var schContent = $('#srch_search_value').val();
        var schType = $('#sel_Search_option').val();
        $.post(
            "../php/odrListDefault.php",
            {schContent: schContent, schType: schType},
            function (data) {
            //数据成功返回时执行次回调函数
                $('#odr-result').html(data);
            }
        );
    });

    以上是订单搜索按钮绑定的click事件,订单可以正常搜索并返回结果,下面贴的是修改按钮绑定的click事件:

    //修改购物车费用信息 通过购物车修改弹出窗体里的修改按钮点击响应
    $("button[id^='cart_mod_']").click(function(){
        var id_tail = parseInt($(this).attr("id").replace(/[^0-9]/ig,""));
        var Cart_no = $("#" + "str_cartno_" + id_tail).text();
        var cart_cost = $("#" + "cart_cost_" + id_tail).val();
        var cart_freight = $("#" + "cart_freight_" + id_tail).val();
        var cart_addition = $("#" + "cart_addition_" + id_tail).val();
        var shipping_weight = $("#" + "shipping_weight_" + id_tail).val();
        var post_url = '../include/cart_mod.php';
    
        $.ajax({
            type: 'POST',
            url: post_url,
            data: {
                Cart_no: Cart_no,
                cart_cost: cart_cost,
                cart_freight: cart_freight,
                cart_addition: cart_addition,
                shipping_weight: shipping_weight
            },
            success: function(data, status) {
                $("#" + "feeShippingFee_" + Cart_no).html(data['Cart_Shipping_Fee']);
                $("#" + "feeCostFee_" + Cart_no).html(data['Cart_Cost']);
                $("#" + "feeCartProfit_" + Cart_no).html(data['Cart_Profit']);
                $("#" + "feeCartProfitRate_" + Cart_no).html(data['Cart_Profit_Rate']);
                $("#" + "cart_mod_status_" + id_tail).html('<div class="alert alert-success col-md-8 col-md-offset-2" >' + status +'修改成功</div>');
            },
            dataType: 'json'
        });
    });

    请问这种情况,我该如何处理呢? 如果我提供的信息不足或者有疑问,请留言告知, 万分感谢。
    PHP新手

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • @夢姼 普通会员 1楼

      在jQuery中,如果两个元素都有click事件并且在同一个事件循环中被触发,那么两个事件会被一起处理。这就意味着,即使两个事件在一个元素上被触发,它们也会同时被执行。

      如果你想在一个元素上触发click事件,但是不希望两个事件同时被执行,你可以使用stop propagation()方法来阻止事件的默认传播。例如:

      javascript $("#myElement").click(function(event) { event.stopPropagation(); // Your code here });

      这样,即使click事件被触发在同一个元素上,event.stopPropagation()方法会阻止事件的默认传播,因此两个事件都不会被执行。

      但是,需要注意的是,如果你使用event.stopPropagation()方法阻止事件的传播,那么所有与这个事件相关的事件都会被阻止。如果你只想阻止click事件的传播,但允许其他事件仍然被触发,你可以使用event.preventDefault()方法。例如:

      javascript $("#myElement").click(function(event) { event.preventDefault(); // Your code here });

      这样,event.preventDefault()方法会阻止事件的默认传播,但是允许其他事件仍然被触发。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部