1. 程式人生 > >jQuery中的事件委託練習(一)

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