如何訪問事件處理程序中的屬性？

Question

爲什麼下面的代碼會產生兩個不同的警報？我試圖使用Jquery添加「myAttr」屬性，但它的值在實時點擊處理程序中不可用。

$("#holder").append("<div class='varInfo' myAttr='1'>new</div>") 
    .attr("myAttr","a1") 
    .click(function(){ 
     alert($(this).attr("myAttr")); 
    }); 

$(".varInfo").live('click',function(){ 
    alert($(this).attr("myAttr")); 
}); 

Answer 1

因爲在第一個代碼塊中，您在#holder上設置了「myAttr」屬性，而不是在div.varInfo上。您還在#holder上點擊點擊處理程序。你需要追加.varInfo，然後找到它。

$("#holder").append("<div class='varInfo' myAttr='1'>new</div>") 
    .find('.varInfo') 
    .attr("myAttr","a1") 
    .click(function(){ 
     alert($(this).attr("myAttr")); 
    }); 

$(".varInfo").live('click',function(){ 
    alert($(this).attr("myAttr")); 
}); 

其實我建議，如果你能轉換它有點像這樣：

$('<div class="varInfo" myAttr="1">new</div>') 
    .attr('myAttr', 'a1') 
    .click(function() { 
     alert($(this).attr('myAttr')); 
    }) 
    .appendTo('#holder'); 

$(".varInfo").live('click',function(){ 
    alert($(this).attr("myAttr")); 
});