0

これは私のテストケースです:

<!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 Sequence 1をクリックすると、最初にテキスト '1' を持つ次の div がランダムな値を取得し、0.3126203578431159 とします。次に、divシーケンス 2をクリックすると、最初に値「2」を持つ次の div がランダムな値を取得し、0.16280379495583475 とします。これまでのところ、すべてが正常に機能しています。最初の0.3126203578431159をクリックすると、2 番目の div 0.16280379495583475 が値を変更します。要素 0.312620357843115 は値を変更する必要があります (2 番目のものではなく、新しいランダムを取得します)。

これは、DOM 要素にイベントをバインドできず、html 要素 ID、クラス、その他の属性にのみイベントをバインドできるということですか? 各DOM要素には、使用できるIDもありませんか。

4

2 に答える 2

7

スコーピングの問題。undeclaredeは、両方のハンドラー間で共有されるグローバルになります。それを修正するには：

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

これは、e各シーケンスのハンドラー内で一意になります。

Demo

于 2013-06-11T11:51:23.453 に答える