jQuery dynamic table live click plugin

Question

I'm trying to write jquery-plugin for table.

I have 2 dynamic tables from server:

<div id="first_column">
   <table>
      <tr id="f1">
         <td class="select">some text</td>
         <td class="name">some name</td>
       </tr>
       <tr id="f2">
       ....
       more same rows
       ....
       </tr>
   </table>
</div>

<div id="second_column">
   <table>
      <tr id="s1">
         <td class="select">some text</td>
         <td class="name">some name</td>
       </tr>
       <tr id="s2">
       ....
       more same rows with differents id's
       ....
       </tr>
   </table>
</div>

<script>
$(document).ready(function() {
   $("#first_column").smplPlugin ();
   $("#second_column").smplPlugin ();
});
</script>

then i want to add click event on <td>.

(function($) {
   $.fn.smplPlugin = function() {
      return this.each(function() {  
         $this = $(this);
         $this.find("td").live('click', function()
            alert($this.attr('id') +" "+ $(this).parent().attr('id'));   
         });
      });
   };
})(jQuery);

when i click on <td> on first or on second table, I always get the same, last object id, it's: second_column, but different first or second rows id's

click on [first column][tr id=f1][td class=name] output second_class f1

click on [second column][tr id=s2][td class=select] output second_class s2

and so on Any ideas, thanks

Answer 1

Try this

(function($) {
   $.fn.smplPlugin = function() {
    $("td",this).live('click', function() {
      alert($(this).parent().attr('id') +" "+ $(this).parents('div').attr('id'));          
     });
  };
})(jQuery);