0

Jquery 在访问自定义数据属性方面表现出一些非常奇怪的行为

这是HTML

<div id="foo2" data-bar="bar" class="baz">some text</div>

jQuery

$(document).ready(function() {

    $("#mainPage").on("click", "[id^='foo']", doSomething);

});


function doSomething(e) {
    var bar = $(e.target).attr("data-bar");
}

这给出了 bar = undefined

然而

function doSomething(e) {
        e.target
        var bar = $(e.target).attr("data-bar");
    }

给出 bar = "bar"

我觉得这非常奇怪。在 Chrome 调试控制台上，它清楚地显示了数据集或目标持有bar: "bar"但没有e.target它返回undefined。这是某种错误吗？

4

1 回答 1

1

使用$(this)或$(e.target)工作。您的 foo div 是否在 ID 为 mainPage 的元素内？

$(document).ready(function() {

    $("#mainPage").on("click", "[id^='foo']", doSomething);

});


function doSomething(e) {
    console.log($(e.target).attr("data-bar"));
    console.log($(this).attr('data-bar'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body id='mainPage'>
<div id="foo2" data-bar="bar" class="baz">some text</div>
  </body>

于 2015-07-02T22:53:13.507 回答