Question

我无法让jQuery认识到我已经更改了数据属性以获取和利用新值。

我正在检测点击：

$('[data-section="welcome"]').click(function() {
            $(this).html('Clicked');
            $(this).attr('data-section','expertise')
            $(this).attr('data-spaces','2')
});

一旦发生这种情况，你可以看到它改变了数据部分和数据空间，然后我就像这样检测新的点击：

$('[data-section="expertise"]').click(function() {
            $(this).html('Click me');
            $(this).attr('data-section','welcome')
            $(this).attr('data-spaces','1')
});

我也有这个告诉我发生了什么：

$('.someClass').click(function() {
    var spaces = $(this).data('spaces');
    var section = $(this).data('section');
    console.log('This number of spaces is: ' + spaces + ' and the section is: ' + section);
});

当我第一次点击时，检查器中的属性会发生变化，当我再次单击时，没有任何反应。输出总是：

This number of spaces is: 1 and the section is: welcome

有人可以帮助我让click事件注册新值并运行该函数中的任何内容吗？

Answer 1

jQuery的data()和attr()之间存在差异。数据方法为变量提供缓存，因此尝试使用一种方法而不是组合它们。另外，如果你想使用动态html和jQuery，你必须使用jQuery的on() method。

DEMO

Answer 2

尝试

$(document).ready(function () {
    $('.someClass').on("click", function (e) {
        function dataState() {
            return console.log('This number of spaces is: ' 
                               + $(e.target)[0].dataset.spaces 
                               + ' and the section is: ' 
                               + $(e.target)[0].dataset.section);
        };
        if ($(e.target)[0].dataset.spaces === "1") {
            $(e.target)[0].dataset.spaces = "2";
            $(e.target)[0].dataset.section = "expertise";
            $(e.target).html("clicked");
            dataState();
        } else {
            $(e.target)[0].dataset.spaces = "1";
            $(e.target)[0].dataset.section = "welcome";
            $(e.target).html("click me");
            dataState();
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/B7N3e/

jQuery没有检测到最近添加的.data setter

2 个答案: