Question

I’m removing the rows from a table and then reinserting them after user has made some edits on a form; poblem is

class="view_dialog"

is not “loaded” for the inserted rows.

the original row has this layout:

<tr>
    <td>new one</td>
    <td>B2B NFIB</td>
    <td class="actions" id="actions">
       <a href="/dirs/edit/252" class="view_dialog">Edit</a>
    </td>
</tr>

Once user changed some things, I remove all rows (usually just 3 of 4) and use jquery to populate the table (.records):

$('.records tbody tr:last').after('<tr><td>'+data.dirArray[$count].Dir.name+'</td><td>'+data.dirArray[$count].Dir.dir_description+'</td><td class="actions" id="actions"><a href="/dirs/edit/'+data.dirArray[$count].Dir.id+'" class="view_dialog" id="Edit'+data.dirArray[$count].Dir.id+'">Edit</a></td></tr>');

Rows are created just fine and the generated code for the rows is identical to the original (add id trying to use .addClass to no luck)

<tr>
    <td>new one</td>
    <td>B2B NFIB</td>
    <td class="actions" id="actions">
        <a href="/dirs/edit/252" class="view_dialog" id="Edit252">Edit</a>
   </td>
</tr>

Why is the class not “loaded”. I’m using that class to trigger some events.

Tried

$("[id^=Edit]").addClass('view_dialog'); 

to no results.

Checked .live but it has to do with parent-children controls. Is it mandatory to use in this case?

Can you help?

Thanks a lot !

Answer 1

Your click bindings only apply to elements that are in the DOM at the time you create them, not elements that get added later. To handle elements that are added dynamically, you need to delegate with this:

$(".records").on("click", ".view_dialog", function() {
    alert('class clicked');
});