Retrieving jQuery data from dynamic HTML element returns undefined

Question

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute.

My jQuery looks like this:

$( document ).ready( function() {
    $( ".checkmark" ).on( "click", ( event ) => {
        let checkBoxId = "#" + event.target.id, // #checkBox1
            checkBoxData = event.target.id + "-value", // checkBox1-value
            checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
    } );
} );

The HTML element targeted looks like this:

<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>

The value of let checkBoxValue is undefined and I cannot figure out why. Help would be greatly appreciated.

Ikhlak S. · Accepted Answer · 2017-11-07 07:49:09Z

1

You can get attribute value of span using attr() function in jQuery

checkBoxValue = $(checkBoxId).attr(checkBoxData);

edited Nov 7, 2017 at 7:49

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

answered Nov 7, 2017 at 7:07

agit

6315 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user557419 · Accepted Answer · 2017-11-07 07:52:54Z

1

The checkBoxId variable is unnecessary because you can use the this keyword since it is the current element you are working with.

$(function() {
    $(".checkmark").on("click", (event) => {
        let checkBoxData = event.target.id + "-value";
        let checkBoxValue = $(this).data(checkBoxData);
    });
});

answered Nov 7, 2017 at 7:52

user557419

Comments

Ikhlak S. · Accepted Answer · 2017-11-07 08:01:50Z

1

It seems you are having scope issues with the new ()=>{} syntax.

So, you will need to bind this to the function event handler using {self:this}. If you don't want to do this, you can use the old function(){} syntax instead.

$( document ).ready( function() {
    $( ".checkmark" ).on( "click", {self:this}, ( event ) => {
        var checkBoxValue = $(this).data("checkbox1-value")
        alert(checkBoxValue);
    } );
} );

And also as @Erwin mentioned, use only lowercase in your data- attribute name:

<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>

JsFiddle

edited Nov 7, 2017 at 8:01

answered Nov 7, 2017 at 7:33

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

2 Comments

Wasbeer Over a year ago

Thank you so much for your response guys. Love this developer community. :)

Ikhlak S. Over a year ago

@Wasbeer That is great to know <3. Please upvote any helpful answers and select a best answer as well

Goma · Accepted Answer · 2017-11-07 07:20:13Z

0

It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be

<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>

for the .data() to work.

answered Nov 7, 2017 at 7:20

Goma

1,9811 gold badge13 silver badges19 bronze badges

Comments

Mahmoud Nabil · Accepted Answer · 2017-11-07 07:31:40Z

0

this code works for me try it ;)

$( document ).ready( function() {
    $( ".checkmark" ).on( "click",  function()  {
        var checkBoxId = "#" + $(this).attr('id');
          var  checkBoxData =  $(this).attr('id') + "-value";
        $( this ).attr('data-'+ checkBoxData, 155 );
    } );
});

jsfiddle link

answered Nov 7, 2017 at 7:31

Mahmoud Nabil

214 bronze badges

Collectives™ on Stack Overflow

Retrieving jQuery data from dynamic HTML element returns undefined

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related