Question

我正在尝试为表编写jquery-plugin。

我有两个来自服务器的动态表：

(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>时，我总是得到相同的，最后一个对象id，它是：second_column，但不同的第一行或第二行id

点击[第一栏] [tr id = f1] [td class = name]输出second_class f1

点击[第二栏] [tr id = s2] [td class = select]输出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);

jQuery动态表实时点击插件

2 个答案: