Question

I found this post: Editing and deleting a newly added table row using Jquery and that seemed like it was exactly what I was looking for, but I couldn’t get their suggested solution to work.

After making an ajax call, I add a new row to a table. The row looks similar to this:

<tr class="classRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
    <td width="35px"><a class="classEditLink classAdminFormSubmit" name="33" href="#">Edit</a></td>
    <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="33" /></td>
    <td>CLASS101</td>
    <td>Class Description</td>
</tr>

The Edit link doesn’t work until after a page refresh (I’m assuming that has something to due with the fact that it’s not in the DOM immediately after it’s added to the table). So, I needed to find a workaround, which lead me to the above-mentioned post.

I modified the code from there to look like this:

$('a').live('click', function(e){
    if ($(e.target).attr('class') == 'classAdminFormSubmit') {
        alert($(e.target).name());

        OpenEditDialog($(this));
        return false;
    }
});

The alert never fires, so I’m hoping it’s just that my selector needs adjusting. I need to pass the selected anchor tag to the OpenEditDialog function.

Answer 1

$( 'a' ).live( 'click', function () {

    var $this = $( this );

    if ( $this.hasClass( 'classAdminFormSubmit' ) ) {

        alert( $this.attr( 'name' ) );

        OpenEditDialog( $this );

        return false;

    }

});