Losing click event after recreating elements

Question

I'm removing table tbody set and inserting new ones but I'm loosing click event on chekcbox. How can I solve this issue?

I went through append(), clone() but failed to apply to my code so for that reason I created a JSFIDDLE which has everything.

Please tell me what I need to do.

Thanks in advance.

JSFIDDLE - CODE IS HERE

JQUERY:

$(window).load(function(){
    $('.add-selected').on("click",function() {
       alert('hello');
    });

    $('#removeAndAdd').click(function(event) {
        event.preventDefault();

        var output = '';
        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-1" class="add-selected" /></td>';
        output += '<td>1</td>';
        output += '</tr>';
        output += '</tbody>';

        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-2" class="add-selected" /></td>';
        output += '<td>2</td>';
        output += '</tr>';
        output += '</tbody>';

        $('.filter-rows').empty();
        $('#add-new-table tbody:last').after(output);
    });
});

HTML:

      <table id="add-new-table" border="1px">
        <thead>
            <th>ID</th>
            <th>SKU</th>
        </thead>

        <tbody>
            <tr>
                <td>Lbel</td>
                <td>011</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-1" class="add-selected" /></td>
                <td>1</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-2" class="add-selected" /></td>
                <td>2</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-3" class="add-selected" /></td>
                <td>3</td>
            </tr>
        </tbody>

    </table>

<br />
<span id='removeAndAdd'>Click me to Remove all first and Add new rows</span>

I could be wrong but I think the problem is you are trying to use click events in jQuery on dynamically created elements. I believe you may need to look into binding these events with the jQuery .on() event. — Ryan Beaulieu, Jul 09 '14 at 15:00
You're right they are created in a loop. I looked into jQuery .on() event but to be honest I'm bad with jQuery so I didn't know what to change. — BentCoder, Jul 09 '14 at 15:02
@RyanBeaulieu You are right. http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — edhedges, Jul 09 '14 at 15:03

Dominic · Accepted Answer · 2014-07-09T15:11:51.587

There some bad practices here. Firstly the fixed version:

http://jsfiddle.net/678CP/5/

$('#add-new-table').on('change', 'input', function() {
   alert('hello');
});

$('#removeAndAdd').click(function(event) {
    event.preventDefault();

    var rows = $('#add-new-table .filter-rows');

    rows.first().add(rows.last()).remove();
});

I am going to assume you need to make a new tbody for every row - otherwise remove it.
Why re-create the whole table? I am assuming you don't need to, if you do the code needs some changes.
Why wait for domLoad? I have change it to onDomReady (fiddle settings)
A clickable element should be an anchor <a> with an href
I know this is just a demo but I am hoping you don't mix double and single quotes in your html and javascript and that you don't use IDs everywhere

How it works:

By using the second parameter of jQuery's on we have created an event delegate. This means that the event is placed on the table itself #add-new-table and it is listening for changes to any inputs inside the table. So it is one single event and it doesn't care if stuff inside is updated/removed etc. It is also more efficient.

And a small explanation of var rows = $('#add-new-table .filter-rows'); rows.first().add(rows.last()).remove();:

"Get all the filter rows and store that. Then select the first row and add the last row to that selection, finally remove them"

Losing click event after recreating elements

1 Answers1