為動態新增元素新增點選事件所遇到的坑
目的：有一個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;
按照這個要求，我的程式就要寫成這樣：
<script type="text/javascript">
$(function(){
$("#aaa ul li").hover(function(){ //當滑鼠移入時
$(this).addClass("co");
},function(){
$(this).removeClass("co"); //當滑鼠移出時
});
$(“li").on("click",".co",function(){
alert($(this).html());
});
});
</script>
但現實很“骨感",因為在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" src="js/index.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>
=====================
現在要把它改成分離的形式：
把 <!--<script type="text/javascript" src="js/index.js"></script>-->這一句的註釋拿掉
然後再把
$(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);
這樣就可以運行了！完美！！！！！ 你可以把這個方法用於選單之中。