Question

我有一张桌子，我有一个按钮，然后当我点击该按钮时，我插入一个新行。但插入一行后我无法插入另一行。

要获得更多许可，请参阅此fiddle。

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>

JS：

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

Answer 1

使用事件委托 -

$('#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);
});

演示---> http://jsfiddle.net/g2UwK/5/

http://learn.jquery.com/events/event-delegation/

Answer 2

也许你可以尝试这样的事情： JSFiddle

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

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

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

我没有将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>

这是你在找什么？我希望这会有所帮助：）

jQuery - 添加另一行

2 个答案: