求助， 关于jQuery 绑定click事件重叠的疑问。

Question

最近正在做一个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新手

Answer 1

使用事件代理是比较好的解决办法，参考 @Poised_flw 的答案。

对于你这个问题，也可以简单的采用解绑事件再重新绑定的方法（改起来快，但效率不高，可临时使用）

$("button[id^='cart_mod_']").off("click").on("click", function() {....})

Answer 2

关键词：事件代理

// 当然，这里可以直接替换成$(document)也是可以的。
$('#odr-result').on('click', "button[id^='cart_mod_']", function () {
    // ...
})

确保上面的代码只会执行一次。