jQuery向table追加tr功能异常：点击li元素时新增2行而非1行如何解决

核心原因汇总 #

• 事件重复绑定：同一段click事件绑定逻辑被执行了两次，常见于JS文件重复加载、页面初始化函数多次调用、AJAX更新内容后未先解绑就重复绑定事件，单次点击会触发两次回调执行两次插入逻辑。
• 事件冒泡触发：li内部的子元素（如单选/复选框、关联的label标签）也绑定了click事件，点击时事件向上冒泡到li节点，导致回调被触发两次。
• 选择器匹配重复元素：如果页面中.wpforms-field-payment-multiple下存在嵌套的ul、li结构，你的选择器会同时匹配外层父li和内层子li，一次点击会触发两个匹配元素的回调，最终插入两行。

修复方案 #

方案1：先解绑再绑定，解决重复绑定问题 #

绑定事件前先调用off('click')清理已绑定的事件，避免重复触发：

$('.wpforms-field-payment-multiple ul li').off('click').on('click', function(){
    var price = $(this).find('input').data('amount');
    var parent = $(this).closest('.wpforms-field-payment-multiple');
    var titles = $('.wpforms-field-description',parent).html();
    $('#booking .right .price table tbody').append('<tr><td class="name">'+titles+'</td><td class="pr">'+price+'</td></tr>');
});

方案2：阻止事件冒泡，解决冒泡触发问题 #

如果调整后仍有重复触发，在回调中添加阻止冒泡逻辑：

$('.wpforms-field-payment-multiple ul li').off('click').on('click', function(e){
    // 阻止事件向上冒泡到父级元素
    e.stopPropagation();
    var price = $(this).find('input').data('amount');
    var parent = $(this).closest('.wpforms-field-payment-multiple');
    var titles = $('.wpforms-field-description',parent).html();
    $('#booking .right .price table tbody').append('<tr><td class="name">'+titles+'</td><td class="pr">'+price+'</td></tr>');
});

方案3：调整选择器，解决嵌套li匹配问题 #

如果页面存在嵌套li结构，修改选择器仅匹配直接子级的li：

// 仅匹配.wpforms-field-payment-multiple下直接子ul的直接子li
$('.wpforms-field-payment-multiple > ul > li').off('click').on('click', function(e){
    e.stopPropagation();
    var price = $(this).find('input').data('amount');
    var parent = $(this).closest('.wpforms-field-payment-multiple');
    var titles = $('.wpforms-field-description',parent).html();
    $('#booking .right .price table tbody').append('<tr><td class="name">'+titles+'</td><td class="pr">'+price+'</td></tr>');
});

内容的提问来源于stack exchange，提问作者vahab