JQuery динамический стол плагин живой клик

Question

Я пытаюсь написать jquery-плагин для таблицы.

У меня есть 2 динамические таблицы с сервера:

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

    $(document).ready(function() {
       $("#first_column").smplPlugin ();
       $("#second_column").smplPlugin ();
    });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<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>

тогда я хочу добавить событие клика на <td>.

когда я нажимаю <td> в первой или второй таблице, я всегда получаю один и тот же последний идентификатор объекта, это: second_column, но разные идентификаторы первой или второй строки

нажмите [первый столбец] [tr id = f1] [td class = name] выходной second_class f1

щелкните [второй столбец] [tr id = s2] [td class = select] output second_class s2

и тд. Есть идеи?

Answer 1

Ваша линия $this = $(this); должна быть var $this = $(this);.

Первый создает глобальную переменную с именем $this и назначает новое значение / ссылку на каждую итерацию каждого цикла - использование переменной всегда указывает на последний итерированный элемент. Последний код создает переменную в замыкании вашего тела цикла, что дает каждому обработчику кликов ссылку на его строку.

Answer 2

Попробуйте это

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