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

Question

最近正在做一个php的项目，一个订单管理的系统，根据业务需求，每条订单显示的表格又一个修改按钮，按钮的id属性动态生成，这个修改按钮的作用就是点击之后会弹出一个bootstrap的模态框，模态框显示该订单的所有信息，并对可修改项提供修改功能，当进入订单页面主页的时候，点击每个订单的修改按钮模态框都可以正常弹出，问题出现在新加了订单搜索功能之后，搜索出来的订单的修改按钮点击的时候模态框弹出背景的黑色会比在订单页面直接点击弹出的模态框背景颜色更深（怀疑重叠了），当连续点击几次搜索按钮之后，搜索出的同一个订单的修改按钮点击之后，模态框就无法正常弹出了，取而代之的是只有透明黑色的背景。//这是搜索按钮所绑定的click事件$('#odrSearch').click(function(){varschContent=$('#srch_search_value').val();varschType=$('#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(){varid_tail=parseInt($(this).attr("id").replace(/[^0-9]/ig,""));varCart_no=$("#"+"str_cartno_"+id_tail).text();varcart_cost=$("#"+"cart_cost_"+id_tail).val();varcart_freight=$("#"+"cart_freight_"+id_tail).val();varcart_addition=$("#"+"cart_addition_"+id_tail).val();varshipping_weight=$("#"+"shipping_weight_"+id_tail).val();varpost_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(''+status+'修改成功');},dataType:'json'});});请问这种情况，我该如何处理呢？如果我提供的信息不足或者有疑问，请留言告知，万分感谢。PHP新手

Answer 1

关键词：事件代理
//当然，这里可以直接替换成$(document)也是可以的。
$('#odr-result').on('click',"button[id^='cart_mod_']",function(){
//...
})
确保上面的代码只会执行一次。