Button no longer fires function after being used once

Question

I have a table / tbody / row that, when a user clicks on "Add Product", I want that row to be cloned and pasted underneath the previous row. In other words, the user is adding journal entry items.

What I want, is that when they first click on the "Add Product" button, I want the row to be cloned and inserted underneath. I then want that first "Add Product" button to be disabled, however, the next button has to be enabled in order to allow yet another entry to be inserted, so on and so forth.

So far, I can get the button to clone and insert the row below, and disable the first button. However, the second button, although not disabled, no longer fires the function. It is just an "empty" button.

<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="sales-journal-add" />Add Product</button>
            </td>
        </tr>
    </tbody>
</table>

And the jquery

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

why not just one button for all? – Mohammad Areeb Siddiqui Jun 19 '13 at 15:05 — Mohammad Areeb Siddiqui, Jun 19 '13 at 15:05

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

You would need to use event delegation for the new buttons. The click events are bound initially only to the buttons that existed in DOM, but not for the ones that were cloned. SO bind the event to the container for delegation to the buttons so that it gets applied for the buttons that are created in the future when you clone your new 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');
});

You can use .on() for jquery >=1.7 or live for older versions (deprecated).

Also as my suggestion try using prop instead of attr to set the disabled property.

Fiddle

score 0 · Answer 2 · answered Jun 19 '13 at 15:34

Here, try this:

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

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

Fiddle.

Any idea what I would need to do to also disable the row (the one just inserted?) — fizzy drink, Jun 19 '13 at 17:22
Yes, you just would need to disable every element present in the row while disabling the button! — Mohammad Areeb Siddiqui, Jun 19 '13 at 17:28

Button no longer fires function after being used once

2 Answers2

Fiddle