add data attribute dynamically

Question

My html is

<div id="ctup-ads-widget-2" class="caption slide-heading "  data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeOutExpo">Hui</div>

I am trying to change the values of dat=x and data-y dynamically

I tried both below which did not work.

<script>
$('#ctup-ads-widget-2').click(function() {

    $(this).attr("data-x", "580");
});
</script>

and

<script>
$('#ctup-ads-widget-2').click(function() {
    $(this).data('x') = "580";
});
</script>

and

<script>
window.onload = function() {
    var anchors = document.getElementById('ctup-ads-widget-2');
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].setAttribute('data-x', '580');
        anchors[i].setAttribute('data-y', '30');
    }
}
</script>

console screenshot

enter image description here

error screenshot

enter image description here

`$(this).data('x') = "580";` is syntactically wrong.... `$(this).attr("data-x", "580");` should work... how are you saying it is not working — Arun P Johny, Jun 04 '15 at 05:15
If you are using data-api to access the value then need to use `$(this).data("x", "580");` — Arun P Johny, Jun 04 '15 at 05:15
http://stackoverflow.com/questions/14935191/adding-data-attribute-to-dom — Nagaraj S, Jun 04 '15 at 05:17
Probably, your DOM is not loaded at the moment of your script execution. Use jQuery document ready or window.onload functions. — Yeldar Kurmangaliyev, Jun 04 '15 at 05:22
@Melvin Actually, Zee has already described how it should be done. — Yeldar Kurmangaliyev, Jun 04 '15 at 05:28

Zee · Answer 1 · 2015-06-04T05:20:16.730

3

You can't use it like

$(this).data('x') = "580";//won't work

Try with data()

 $(this).data("x","580"); //$(this).attr("data-x", "580") should also work

Update

Enclose it in $(document).ready..

$(document).ready(function(){
  $('#ctup-ads-widget-2').click(function() {
    $(this).data("x","580");
  });
})

edited Jun 04 '15 at 05:20

answered Jun 04 '15 at 05:14

Zee

8,420
5
36
58

– Melvin Jun 04 '15 at 05:18
@Melvin Screenshot is fine but you need to tell us which line you are getting that error. – Zee Jun 04 '15 at 05:30
@Melvin Have you included jQuery? – Zee Jun 04 '15 at 05:35
– Melvin Jun 04 '15 at 05:43
included in footer .. i have added the script to header .. is that be a pblm? – Melvin Jun 04 '15 at 05:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79612/discussion-between-zee-and-melvin). – Zee Jun 04 '15 at 05:49

avk87 · Answer 2 · 2015-06-04T05:46:20.277

0

If data-attribute needs to be dynamically added on an element,

$("this").attr("data-x", "5");

can be used.

From seeing your screenshots, it's clear that jQuery was not loaded properly. Use <script> tag to load jQuery file before end of </body> tag.

Example:

<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>

edited Jun 04 '15 at 05:46

answered Jun 04 '15 at 05:35

avk87

1
1
4

add data attribute dynamically

2 Answers2