Question

这是我的测试用例：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
    <script type="text/javascript">

    $(document).ready(function()
    {
      $('.sequence').on('click', function()
      {
        e = $(this).next(); // div element, DOM element
        e.html(Math.random());

        e.on('click', function()
        {       
          e.html(Math.random());
        });

      });
    });
    </script>
  </head>
  <body>

    <div class="sequence">Sequence 1</div>
    <div>1</div>

    <div class="sequence">Sequence 2</div>
    <div>2</div>

  </body>
</html>

可以在http://jsfiddle.net/3LrXZ上测试上层代码。

当我点击div 序列1 时，首先有文字'1'的下一个div获得一些随机值，让我们说0.3126203578431159。然后我点击div 序列2 ，最初有值'2'的下一个div得到一些随机值让我们说0.16280379495583475。直到现在一切正常。现在当我点击第一个0.3126203578431159第二个div 0.16280379495583475更改值。元素0.312620357843115应该更改值（获取新的随机值，而不是第二个）。

这是否意味着您无法绑定DOM元素上的事件，您只能绑定html元素id，类和其他属性上的事件？是不是每个DOM元素都有一些可以使用的ID。

Answer 1

范围问题。未声明的e成为两个处理程序共享的全局。解决它：

var e = $(this).next();

每个序列'处理程序中都有一个唯一的e。

Demo

Answer 2

  var e = $(this).next(); // div element, DOM element
      e.html(Math.random());          

      e.on('click', function ()
      {
          $(this).html(Math.random());
      });

http://jsfiddle.net/59HgA/

$（this）上的jQuery click事件

2 个答案: