Reputation: 5068
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.
Upvotes: 0
Views: 378
Reputation: 12302
$( 'a' ).live( 'click', function () {
var $this = $( this );
if ( $this.hasClass( 'classAdminFormSubmit' ) ) {
alert( $this.attr( 'name' ) );
OpenEditDialog( $this );
return false;
}
});
Upvotes: 1
Reputation: 13549
First, put a link in the row you just added, and give it a class, let's say it's editRow
.
Second, use this code:
$('a.editRow').live('click', function(e){
alert($(e.target).name());
OpenEditDialog($(this));
e.preventDefault(); // this is better than return false;
});
Upvotes: 0