BentCoder BentCoder - 1 month ago 5
HTML Question

Losing click event after recreating elements

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>

Answer

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();
});
  1. I am going to assume you need to make a new tbody for every row - otherwise remove it.
  2. Why re-create the whole table? I am assuming you don't need to, if you do the code needs some changes.
  3. Why wait for domLoad? I have change it to onDomReady (fiddle settings)
  4. A clickable element should be an anchor <a> with an href
  5. 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"

Comments