2

我有一个表格，上面有一个按钮，然后当我单击该按钮时，我插入一个新行。但插入一行后，我无法插入另一行。

有关更多间隙，请参阅this 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);
});
4

2 回答 2

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/

于 2013-06-19T15:30:29.127 回答
0

也许你可以尝试这样的事情： 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>

这是你要找的吗？我希望这个能帮上忙 ：）

于 2013-06-19T20:00:19.940 回答