JQuery .prop() and .attr() setter doesn't work with dialog polyfill

Question

I have a simple dialog tag, which was added by using 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>

I tried to add a new data attribute id to <p> tag by using both jQuery .prop() and .attr() , but it doesn't work at I expected

$('#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

});

I google-d alot, but can't find the solution. So how do I solve this problem?

Codepen problematic code : http://codepen.io/anon/pen/QyZYPK

Answer 1

David Thomas is correct, place this after your JQuery code and you will see that you have set the data-id value.

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"));

or you could use console log(right click on page and click inspect element then click on the console tab):

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

You can see what David Thomas is talking about by console logging the data object:

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

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

Image of console log results:

If you click on the Object in the console you will see that it has an id property with a value of 1.

Data Object Properties: