jQuery中的事件委托练习(一)

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




});

猜你喜欢

转载自blog.csdn.net/weixin_43759645/article/details/84438149