Question

这是JSFiddle http://jsfiddle.net/swordf1zh/BcHuS/13/，示例代码如下：

HTML

<h1>Invoice</h1>
<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <td><strong>Product</strong></td>
                    <td class="text-center">
                        <strong>Price</strong>
                    </td>
                    <td></td>
                </tr>
            </thead>
            <tbody id="tabla-detalle">
                <tr class="detalle">
                    <td>Samsung Galaxy S5</td>
                    <td class="text-center item-reg">900</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
                <tr class="detalle">
                    <td>Samsung Galaxy S5 Extra Battery</td>
                    <td class="text-center item-reg">250</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
                <tr class="detalle">
                    <td>Screen protector</td>
                    <td class="text-center item-reg">300</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<h1>Available products</h1>
<table class="table" id="search-items-table">
    <thead>
        <tr>
            <th>Product</th>
            <th class="text-center">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="list-item">
            <td class="list-item-name">iPhoneX</td>
            <td class="text-center list-item-reg">1000</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Tablet</td>
            <td class="text-center list-item-reg">350</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Item x</td>
            <td class="text-center list-item-reg">300</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Item y</td>
            <td class="text-center list-item-reg">450</td>
        </tr>
    </tbody>
</table>

<button type="button" class="btn btn-primary" id="btn-add-items">Add selected products to invoice</button>

JS

// Delete items from invoice when click on button x
$('.borrar-item').click(function() {
    $(this).closest('tr.detalle').remove();
});

// Select items from 'available products' list
$('.list-item').click(function(){
    $(this).toggleClass('success select2add');
});

// Add selected items from 'available products' to 'INVOICE'
$('#btn-add-items').click(function() {
    $('.select2add').each(function() {
        var name = $(this).children('td.list-item-name').text();
        var price = $(this).children('td.list-item-reg').text();
        $('#tabla-detalle').append('<tr class="detalle"><td>' +name+'</td><td class="text-center item-reg">'+price+'<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td></tr>');
    });
});

JSFiddle下面是一个列表项，可以添加到顶部的发票中，但在新添加的项目中，删除该行的“x”按钮不起作用（按下时可以删除发票中的初始项目）在右边的'x'按钮上。

这是我的第一个使用jQuery和Javascript的项目，我一直在研究过去3个小时试图解决这个问题而没有积极的结果，所以我想看看为什么我的代码不起作用的一点解释。

提前感谢您的帮助！

Answer 1

因为事件不会神奇地添加到新元素中。使用事件委派。

$("#tabla-detalle").on("click", '.borrar-item', function() { 
    $(this).closest('tr.detalle').remove();
});

无法通过jQuery删除添加＆＃39;追加＆＃39;

1 个答案: