如何访问事件处理程序中的属性？

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