jQuery中的事件委托练习（一）

最新推荐文章于 2024-10-06 15:00:00 发布

Xaivor

最新推荐文章于 2024-10-06 15:00:00 发布

阅读量572

点赞数 1

分类专栏： jQuery 文章标签： jQuery 事件委托练习

本文链接：https://blog.csdn.net/weixin_43759645/article/details/84438149

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
});




});