-1

jQueryの学習を始めたばかりです。以下は、動的に追加された div 要素のイベント「mouseover」および「mouseout」をアタッチするために試したコードです。しかし、これをブラウザで実行しようとすると、結果が得られませんでした。何が問題なのかわかりません... jquery の .on() を使用する使用法と構文を検索しましたが、好ましい結果はありませんでした..私の以下のコードを機能させる方法を教えてください..

    <html>
       <head>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
          <script type="text/javascript">
             $(function(){
                 $("#divid").on("mouseover",".test", function(){
                     $(this).css("background-color", "blue");
                 }).on("mouseout",".test", function(){
                     $(this).css("background-color", "white");
                });
             });

             function AddBox(){
                var div = $("<div></div>").addClass("test").text("Another box");
                $("#divTestArea1").append(div);
             }
          </script>
      </head>
      <body>
         <div id="divTestArea1">
            <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
            <div class="test" id="divid">This is a colored box</div>
         </div>
      </body>
   </html>

前もって感謝します...;-）

4

1 に答える 1

3

ここで問題、

#divTestArea1ここに動的divを追加しています$("#divTestArea1").append(div);

しかし、あなたはイベントを委任して #dividいるので、そこにないdivクラステストを検索し<div id=divid>ます。

これを試して

 $("#divTestArea1").on("mouseover",".test", function(){
   ....
  }

.testこれで、 divのマウスオーバー イベントを#divTestArea1..これが必要なものに委譲し、動作するはずです...

于 2013-08-02T07:52:18.350 に答える