2

我有一个表/tbody/行，当用户单击“添加产品”时，我希望将该行克隆并粘贴到前一行下方。换句话说，用户正在添加日记帐分录项目。

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

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

<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');
});
4

2 回答 2

4

您需要对新按钮使用事件委托。点击事件最初只绑定到 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 >=1.7 或用于旧版本（已弃用）。

同样作为我的建议尝试使用prop而不是attr设置 disabled 属性。

小提琴

于 2013-06-19T15:06:03.760 回答
0

在这里，试试这个：

<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);
});

小提琴。

于 2013-06-19T15:34:59.250 回答