HTML5 - how can I view html5 data-attributes in CDT set dynamically using jQuery?

[kerry ruddock]

First Post here.  I could not find an acceptable answer in Stack Overflow so I am asking here.

I want to be able to view data attribute content that I add  dynamically to my web page, such as:

<script>
$( "button" ).data( "emailInfo", {
         emailSuffix: "@hotmail.com",
         cc: "cc-default",
         bcc: "bcc-default"
      });
</script>

CDT shows data attributes that were not added dynamically just fine

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@bob">Message to Bob</button>

Does anyone know why I cannot view the dynamic content?

[PhistucK]

The Elements panel shows the HTML content attributes that are defined on an element.

jQuery plays a bit weird there - $element.data("foo") would give you the value of the HTML data-foo content attribute set on an element, but $element.data({"foo": "bar"}) will not set the HTML data-foo content attribute back on the element. jQuery keeps it in its own storage, separate from the DOM.

There are some Chrome extensions targeted at jQuery, for example (from a quick search) -

https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

Which is supposedly adding another drawer to the side bar that shows the content of the jQuery data() of that element.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/c9c448d4-8fd9-4617-a5bd-4802fbcc676a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[kerry ruddock]

Thanks for the jQuery information as well as the extension link..  The jQuery debugger plugin works great.