Question

我有一个table / tbody / row，当用户点击“Add Product”时，我希望克隆并粘贴该行在上一行下面。换句话说，用户正在添加日记帐分录项目。

我想要的是，当他们第一次点击“添加产品”按钮时，我想要克隆并插入下面的行。然后，我想要首先禁用“添加产品”按钮，但是，必须启用下一个按钮才能允许插入另一个条目，依此类推。

到目前为止，我可以通过按钮来克隆并插入下面的行，并禁用第一个按钮。但是，第二个按钮虽然未禁用，但不再触发该功能。它只是一个“空”按钮。

<table id="sales-journal">
    <tbody>
        <tr class="sales-journal-row">
            <td class="grid-40">
                <select id="sales-product-id" name="sales-product-id" required="required">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
            </td>
            <td class="grid-20">
                <button class="sales-journal-add" id="sales-journal-add" />Add Product</button>
            </td>
        </tr>
    </tbody>
</table>

和jquery

$('.sales-journal-add').click(function() {
    var clone = $('#sales-journal > tbody:last').clone()
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).removeAttr('id').attr('disabled', 'disabled').addClass('disabled');
});

Answer 1

您需要为新按钮使用事件委派。点击事件最初仅绑定到DOM中存在的按钮，但不包括已克隆的按钮。然后将事件绑定到容器以便委派给按钮，以便在克隆新tbody时将其应用于将来创建的按钮。

$('#sales-journal').on('click', '.sales-journal-add' , function() {
    var clone = $('#sales-journal > tbody:last').clone()
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).removeAttr('id').prop('disabled', true).addClass('disabled');
});

您可以将.on()用于jquery＆gt; = 1.7或使用旧版本（不建议使用）。

另外，根据我的建议，请尝试使用prop代替attr来设置已禁用的属性。

Fiddle

Answer 2

在这里，试试这个：

<table id="sales-journal">
    <tbody>
        <tr class="sales-journal-row">
            <td class="grid-40">
                <select id="sales-product-id" name="sales-product-id" required="required">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
            </td>
            <td class="grid-20">
                <button class="sales-journal-add" id="1" />Add Product</button>
            </td>
        </tr>
    </tbody>
</table>

JS：

var cur_id = $(".sales-journal-add").attr('id');
var next_id = parseInt(cur_id) + 1;

$('#sales-journal').on('click',"#" +cur_id,function() {
    var clone = $('#sales-journal > tbody:last').clone();
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).attr('disabled', 'disabled').addClass('disabled');
    clone.find('.sales-journal-add:last').attr('id', next_id);
    cur_id = next_id;
});


$('#sales-journal').on('click',"#" +next_id,function() {
    var clone = $('#sales-journal > tbody:last').clone();
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).attr('disabled', 'disabled').addClass('disabled');

    clone.find('.sales-journal-add:last').attr('id', next_id);
});

Fiddle.

使用一次后按钮不再激活功能

2 个答案:

Fiddle