Javascript jQuery-添加另一行

我有一个表，上面有一个按钮，当我点击这个按钮时，我插入一个新行。但在插入一行之后，我无法插入另一行

欲了解更多信息，请参见此

HTML:

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

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

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

$("#" +next_id).click(function() {
    alert("lepa");

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

使用事件委派-

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


$('#sales-journal').on('click','.sales-journal-add', function () {
    alert("lepa");

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

演示

-->

---

也许你可以试试这样的东西：

我通过创建一个单一事件函数将代码减少了一半，该函数在每次单击后重新绑定到每个新添加的按钮

<script type="text/javascript">
$(function(){
    //Click event
    $(".sales-journal-add").click(function(){
        addRow();
        $(this).hide();
    });
});

//Event function
function addRow(){
    //Get clicked button ID
    var cur_id = $(".sales-journal-add:last").attr('id');
    //Substring ID
    var cur_id = cur_id.substring(3);
    //Parse to int
    var next_id = parseInt(cur_id) + 1;
    //Clone row
    var clone = $('#sales-journal > tbody:last').clone();
    clone.insertAfter('#sales-journal > tbody:last');
    //Change the ID of the newly added button
    clone.find('button').attr('id', "btn"+next_id);
    //Clear each newly added number input
    clone.find('#sales-sold-qty,#sales-spill-qty').val('');
    //Bind Click Event to newly added button
    $(".sales-journal-add").on('click', addRow);
    //Hide the last button
    $(this).hide();
}
</script>

$（函数（）{
//点击事件
$（“.sales journal add”）。单击（函数（）{
addRow（）；
$（this.hide（）；
});
});
//事件函数
函数addRow（）{
//获取点击按钮ID
var cur_id=$（“.sales journal add:last”）.attr（'id'）；
//子字符串ID
var cur_id=cur_id.子字符串（3）；
//解析为int
var next_id=parseInt（cur_id）+1；
//克隆行
var clone=$（'#销售日志>tbody:last'）。clone（）；
clone.insertAfter（“#sales journal>tbody:last”）；
//更改新添加按钮的ID
clone.find（'button'）.attr（'id'，'btn'+next_id）；
//清除每个新添加的数字输入
clone.find（“#销售售出数量，#销售溢出数量”）.val（“”）；
//将单击事件绑定到新添加的按钮
美元（“.sales journal add”）。在（'click'，addRow'）；
//隐藏最后一个按钮
$（this.hide（）；
}

我还隐藏了最后点击的按钮，以防止垃圾邮件等

我没有对HTML做太多更改，只是在按钮ID中添加了一个“btn”

<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="btn1"/>Add Product</button>
        </td>
    </tr>
</tbody>

选择1
选择2
选择3
添加产品

---

这就是你要找的吗？我希望这会有所帮助：）

@MohammadAreebSiddiqui干杯！