Question

我刚开始学习jQuery。下面是我尝试为动态添加的div元素附加事件“mouseover”和“mouseout”的代码。但是当我尝试在浏览器中运行它时，我没有得到任何结果。我不知道什么是错误的...我搜索了使用.on（）的jquery的使用和语法，并没有有利的结果..任何人都可以告诉我，如何使我的下面的代码工作？..

    <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

问题在这里，

您要在此处#divTestArea1

向$("#divTestArea1").append(div);添加动态div

但是您要将活动委托给#divid，以便在<div id=divid>内找到不存在的div类测试。

试试这个

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

有了这个，你将.test div的mouseover事件委托给#divTestArea1 ..这就是我们需要的......应该有用......

为什么.on（）在jquery中没有按预期工作？

1 个答案: