Javascript 按钮使用一次后不再触发功能

我有一个table/tbody/row，当用户单击“addproduct”时，我希望该行被克隆并粘贴到前一行的下面。换句话说，用户正在添加日记账分录项

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

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

---

您需要为新按钮使用事件委派。单击事件最初仅绑定到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');
});

您可以对jquery>=1.7使用，也可以对旧版本使用live（已弃用）

另外，根据我的建议，尝试使用而不是

attr

来设置disabled属性

---

您需要为新按钮使用事件委派。单击事件最初仅绑定到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');
});

您可以对jquery>=1.7使用，也可以对旧版本使用live（已弃用）

另外，根据我的建议，尝试使用而不是

attr

来设置disabled属性

在这里，试试这个：

<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>

在这里，尝试以下方法：

<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>

---

为什么不一个按钮代表所有人？为什么不一个按钮代表所有人？知道我需要做什么才能禁用行（刚才插入的那一个？）是的，在禁用按钮时，您只需要禁用行中的每个元素！像

$（“#sales journal>tbody:last>tr>td”）

知道我需要做什么才能禁用行（刚才插入的那一行？）是的，您只需要在禁用按钮的同时禁用行中的每个元素！比如

$（“#销售日志>tbody:last>tr>td”）

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