动态改变属性时 jQuery data() 的潜在错误？

Question

我不知道我是否刚刚发现了潜在的 jQuery 错误，但请查看以下案例。

如果我动态更改 data-ajax-link 属性，然后尝试使用 $('something').data('ajax-link'); 检索到的值仍然是动态更改之前的旧值。

这是一个例子。这是一个自定义下拉菜单，将单击的选项设置为 ul 的第一个子选项。元素的名称以及第一个子元素的 data-ajax-link 将使用单击选项的值进行更新... http://jsfiddle.net/RLF3W/1/

$('.select .option').live('click', function (e) {
    e.stopPropagation();
        $(".select .option:not('.darr')").hide();
        selectedOption = $(this).parents("div.select").find(".option:first");

        $(this).siblings().show();
        selectedOption.text($(this).text()).attr('data-ajax-link', $(this).data('ajax-link'));
});

$('.select .option:not(".darr")').live('click', function () {
    $(this).parents("div.select").find(".option:not('.darr')").hide();
});

$(window).click(function() {
    $(".select .option:not('.darr')").hide();
});


$('a#tester').live('click', function(e) {
    e.preventDefault();

    //var sort = $('#sortb .darr').attr('data-ajax-link');
    var sort = $('#sort .darr').data('ajax-link');

    $('#output').text(sort)

});

在我的示例中，您可以看到在下拉列表中选择不同的选项然后点击测试链接后，data-ajax-link 的值为仍然是原来的值，尽管如果检查该元素，它实际上会发生变化。如果我使用 .attr('data-ajax-link') 来获取更新的值，它可以正常工作。

我在这里错了吗？我做错了什么或者这是一个错误？

Answer 1

您使用 .attr() 设置它，但使用 .data() 获取它。

我相当确信，当通过.data()获取时，它首先查看jQuery.cache中的数据，看看该属性是否存在。 然后如果没有，它会寻找一个属性。

您应该只通过 data- 属性发送它，但使用 .data() 来获取和设置。

将其更改

selectedOption.text($(this).text()).attr('data-ajax-link', $(this).data('ajax-link'));

为：

  // Use .data()----------------------v
selectedOption.text($(this).text()).data('ajax-link', $(this).data('ajax-link'));

示例： http://jsfiddle.net/RLF3W/5 /