Question 10943 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

$( this ).attr('value') returns undefined – Jquery

I’m trying to use jQuery to get the value or id of a li element on clicking. Everything I’ve tried returns undefined

HTML

<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>

JavaScript

$( '#list li' ).click( ( event ) => {
    var value = $(this).attr('value');
    alert(value); // returns undefined
} );

I’ve tried using this.id as well as $( this ).id – undefined

I’ve tried giving the img tag an id and a value – still undefined

I’ve tried giving the li tag an id – still again, undefined

Tags:

4

Answers


  1. 0

    The this context cannot be bound manually by jQuery with an arrow function. Use a regular function or use event.currentTarget to access the element the event listener is attached to.

    $('#list li').click( ( event ) => {
    var value = $(event.currentTarget).attr('value');
    console.log(value);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>
    Login or Signup to reply.
  2. 0

    this inside the arrow function does not refer to the DOM element that was clicked.

    $( '#list li' ).click(function() {
    var value = $(this).attr('value');
    alert(value); // returns undefined
} );
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>
    Login or Signup to reply.
  3. 0

    Why not put an "a" tag with a class and put an image inside?

    Put the atrribut on the "a" tag like below:

    HTML

    <a href="#" class="something" data-id="01"><img src="">
<a href="#" class="something" data-id="12"><img src="">

    jQuery

    $('.something').on('click', function () {
    id = $(this).data('id');
    console.log(id);
    alert("the Id is : " + id);
});

    You can make your own data atribute, like data-id, data-name, etc.

    Login or Signup to reply.
  4. 0

    This context cannot be bound manually by jQuery with the arrow function. Use a regular function or use event.currentTarget to access the element attached to the event listener.

        $('#list li').click( ( event ) => {
        var value = $(event.currentTarget).attr('value');
        // console.log(value);
        alert(value);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="list" class="content-ul">
        <li value="0">image code0</li>
        <li value="1">image code1</li>
        <li value="3">image code3</li>
    </ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search