使用jQuery无法删除动态创建的行，该如何解决？

• 核心问题：动态生成的删除按钮无法直接绑定点击事件，因为页面初始化时这些元素还不存在，常规的事件绑定只会作用于已加载完成的DOM元素。
• 解决方案：使用事件委托，把点击事件绑定到已存在的父容器上，通过事件冒泡触发动态元素的事件处理逻辑。

完整实现代码 #

HTML（保持原有结构） #

<div class="row">
    <div>
        Currency: <input type="text" id="currencyMain">
    </div>
    <div>
        Amount: <input type="text" id="amountMain">
    </div>
    <div>
        <button id="addAccount">Add Account</button>
    </div>
</div>
<div id="transactionRow">
</div>

jQuery代码 #

// 新增行功能
$('#addAccount').click(function() {
    let currency = $('#currencyMain').val();
    let amount = $('#amountMain').val();
    
    // 动态生成包含删除按钮的行
    let newRow = `
        <div class="transaction-row">
            <span>${currency}</span>
            <span>${amount}</span>
            <button class="delete-btn">删除</button>
        </div>
    `;
    
    $('#transactionRow').append(newRow);
    
    // 清空输入框
    $('#currencyMain').val('');
    $('#amountMain').val('');
});

// 事件委托实现删除功能
$('#transactionRow').on('click', '.delete-btn', function() {
    // 删除当前按钮所在的行
    $(this).closest('.transaction-row').remove();
});

关键说明 #

• 事件委托的逻辑：借助事件冒泡机制，将事件绑定到页面初始化时就存在的父容器（#transactionRow）上。当点击动态生成的删除按钮时，事件会向上冒泡到父容器，父容器再判断触发事件的目标是否为.delete-btn，进而执行删除操作。
• 使用closest('.transaction-row')可以精准定位当前按钮所属的行容器，避免误删其他元素。

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