为动态添加元素添加点击事件所遇到的坑

目的：有一个html,要达到的目的是：当鼠标进入某一个 li 时，它自动为它添加一个class=“co“，然后再为这个co写一个点击事件；

<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>

理想是：$(".co").clock(function(){});就可以了，但理想很丰满，现实很骨感！这样达不到目的。通过网上查询，给出这样的公式：

$(".box").on('click','.boxchild',function(){
console.log("aaaa");
});
它的要求是：在网页中必须有一个静态的.box,所谓静态的就是必须是写成<div class="box"></div>,这样的形式，不能用程序求出来的一个 .box;

按照这个要求，我的程序就要写成这样：

但现实很“骨感",因为在body中，li 不是唯一的，虽然它是真正的存在，但还是没有点击的效果。此时很郁闷！

后来，又在网上找到，将

中的$("li")改为$(document)，实验成功。参考文章：https://blog.csdn.net/golden_wheat/article/details/76085153

完整代码是：代码后面还有更精彩的，请往下看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
$("#aaa ul li").hover(function(){
$(this).addClass("co");
},function(){
$(this).removeClass("co");
});
$(document).on("click",".co",function(){ //为了防止document中有与你的co类名重名，你可以把co改成一个很奇葩的名字：）
alert($(this).html());
});
});
</script>
<style type="text/css">
</style>
</head>

<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>
</html>

=====================

现在要把它改成分离的形式：

把 这一句的注释拿掉

然后再把

$(function(){
$("#aaa ul li").hover(function(){
$(this).addClass("co");
},function(){
$(this).removeClass("co");
});
$(document).on("click",".co",function(){ //注意 co的前面不要少了点哦！不然没有效果; 这里的document如果换成其它的一定要是“唯一”的标签，你如果用li之类就不行，因为它不是唯一的，光是静态的不行哦！不然你就哭吧！
alert($(this).html());
});
});

这一段代码剪切到js/index.js就可以。

===========================================

现在要让这个程序通用起来，把它写成一个jQuery的插件

第一步：写html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
   <script type="text/javascript">
       $(function(){
           $("#aaa ul li").menuAddClassHover(this);
           $("#aaa ul li").menuAddClassClick();
       });
   </script>
<style type="text/css">
</style>
</head>

<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>
</html>

第二步：写css文件，文件名与html的文件名是一样的，只是后缀为.css，以后要养成这样的习惯，为谁写css就与它一样。

.cocococcococ{
   background: #ff00ff;
   color: red;
   width:50%;
}
这个css文件就这样几句

第三步：写jQuery的插件：文件名index.js ,插件的写法请参考相关的资料

;
(function($){
   $.fn.extend({
       "menuAddClassHover":function(element){
           $(this).hover(function(element){
               $(this).addClass("cocococcococ");
           },function(){
               $(this).removeClass("cocococcococ");
           });
       },
       "menuAddClassClick":function(){
           $(document).on("click",".cocococcococ",function(){
               alert($(this).html());
           })
       }
   });

})(jQuery);

这样就可以运行了！完美！！！！！你可以把这个方法用于菜单之中。

为动态添加元素添加点击事件所遇到的坑

猜你喜欢