為什么.on（）無法在jquery中按預期工作？

Question

我剛剛開始學習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>

提前致謝...;-）

Answer 1

這里的問題

您將動態div添加到#divTestArea1此處$("#divTestArea1").append(div);

但是您將事件委派給#divid因此此搜索在<div id=divid>內的div類測試中進行了搜索，該測試不在其中。

嘗試這個

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

這樣，您#divTestArea1 .test div的mouseover事件委托給#divTestArea1 ..這是我們所需要的..應該可以工作...

為什么.on（）無法在jquery中按預期工作？

問題描述

1 個解決方案

解決方案1
3 已采納 2013-08-02 07:52:18

為什么.on（）無法在jquery中按預期工作？

問題描述

1 個解決方案

解決方案1 3 已采納 2013-08-02 07:52:18

解決方案1
3 已采納 2013-08-02 07:52:18