jQuery中的事件委託練習(一)
阿新 • • 發佈:2018-12-02
1.事件委託的基本結構
$(function(){
// 事件委託:
// 請別人幫忙做事,然後將做完的結果反饋給我們
$("button").click(function(){
$("ul").append("<li>我是新增的li</li>");
});
// 在jq中,直接遍歷,給所有li新增點選事件
/*$("ul>li").click(function(){
console.log($(this).html());
});*/
// 事件委託delegate
$("ul" ).delegate("li","click",function(){
console.log($(this).html());
});
});
2.事件委託的練習一(彈框)
$(function(){
$('a').click(function(){
var $mask = $("<div class=\"mask\">\n"+
" <div class=\"login\">\n"+
"<img src=\"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2928342431,2801225001&fm=173&app=25&f=JPEG?w=218&h=146&s=4680DAAA4C927CD05A8607A703009005\" />\n" +
"<span></span>\n" +
"</div>\n" +
"</div>");
$("body").append($mask);
$("body").delegate(".login>span","click",function(){
$mask.remove();
});
return false;
});
});