Question

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 =＆＃34; bar＆＃34;

我发现它完全奇怪。在Chrome调试控制台上，它会清楚地显示保留bar: "bar"的数据集或目标，但如果没有e.target，则会返回undefined。这是某种错误吗？

Answer 1

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

＆＃13;

$(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'));
}

＆＃13;

<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>

＆＃13;

$（event.target）.attr（＆＃34; data-bar＆＃34;）undefined

1 个答案: