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

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