jQuery - Adding another row

Question

I have a table on which I have a button then when I click on that button I insert a new row. But after inserting a row I cannot insert another.

For more clearance see 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);
});

Answer 1

use event delegation -

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

Demo ---> http://jsfiddle.net/g2UwK/5/

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

Answer 2

Maybe you could try something like this: JSFiddle

I reduced the code by half by creating a single Event Function which is re-binded to each newly added button after each click.

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

I also hide the last button clicked to prevent spam and whatnot.

I didn't changed the HTML to much, i only added a "btn" to the button IDs

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

Is this what you were looking for? I hope this will help :)