JQuery .prop（）和.attr（）setter不能使用对话框polyfill

Question

我有一个简单的对话框标记，使用GoogleChrome dialog-polyfill.js

添加

<button id="dialog-show" class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

<dialog id="remove-inventory-dialog" class="mdl-dialog">
    <div class="mdl-dialog__title">
        <p></p>
    </div>
    <div class="mdl-dialog__actions">
        <button class="mdl-button mdl-js-button">Ok</button>
        <button class="mdl-button mdl-js-button">Cancel</button>
    </div>
</dialog>

我尝试使用jQuery id和<p>向.prop()标记添加新的数据属性.attr()，但它没有按预期工作

$('#dialog-show').click(function () {

    $('#remove-inventory-dialog p').text('test value'); // worked
    $('#remove-inventory-dialog p').prop("data-id", 1); // didn't work
    $('#remove-inventory-dialog p').attr("data-id", 1); // didn't work
    $('#remove-inventory-dialog p').data("id", 1); // didn't work

});

我google-d很多，但无法找到解决方案。那么我该如何解决这个问题呢？

Codepen有问题的代码：http://codepen.io/anon/pen/QyZYPK

Answer 1

David Thomas是正确的，把它放在你的JQuery代码之后，你会发现你已经设置了data-id值。

JQuery的（http://codepen.io/larryjoelane/pen/WraPPw）：

var data = '#remove-inventory-dialog p';

//alert the data value you set (returns 1)
alert($(data).data("id"));

或者您可以使用控制台日志（右键单击页面并单击inspect元素，然后单击控制台选项卡）：

//display to the console the data value you set (returns 1)
console.log($(data).data("id"));

您可以通过控制台记录数据对象来了解David Thomas正在谈论的内容：

var data = '#remove-inventory-dialog p';

console.log($(data).data());

控制台日志结果图：

如果单击控制台中的Object，您将看到它具有值为1的id属性。

数据对象属性：