hello,
i have written two event handlers one on click of anchor tag class
(edit_item), another on click of row column class(show_subitems) as
mentioned below.
For the first time page load, its working perfectly(i am providing
event handler code inside jquery(document).ready)
So event handler is getting registered perfectly for the initial page
load
During event handling on the row column of table class outer_tab, i
will make an ajax call and receive response data as table(lets suppose
this table is having class 'inner_tab').
i am creating a new row below the current row(as all the items in
response data table are subitems of the current row item) and keeping
the response data table in the new row column by providing proper
colspan for the td element of new row.
in the response data table also there are anchor tag with the same
class as similar to the outer_tab anchor tag class.
I want to bind the same event on the response data table anchor tag
also.
could anybody let me know how to achieve it?
<table class="main_tab">
<thead>
<th>first</th>
<th>second</th>
</thead>
<tr>
<td class="show_subitems">first cell</td>
<td><a class="del_item">delete</a></td>
</tr>
</table>
// javascript code
$(function(){
$('.show_subitems').live('click', function(e) {
var target = e.target;
var my_tr = $(target.parentNode);
//here ajax call should be made to get data from server, just
for testing hardcoded with dummy data
var dummy_table = "<table class=\"inner_tab\"><thead><th>sub
first</th><th>sub second</th></thead><tbody><tr><td>sub col first</
td><td><a class=\"edit_item\">sub col second</a></td></tr></tbody></
table>";
my_tr.after("<tr id=\"newrow\"><td colspan=2>" + dummy_table +
"</td></tr>");
});
});
$('.edit_item').click( function(e){
var target = e.target;
$.get($(this).attr('href'));
return false;
});
Best Regards,
Mohan
