Jquery : Access Data-link Attribute

i want to get data-link attribute form an image click . Following is my image tag

$(".aclick").click(function (e) {
        e.preventDefault();
        alert($(this).find('img').attr("data-link"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

Solution 2:

The reason you're not getting a value is that you're getting the data-link attribute of the anchor tag as that is what represents this. If you find the child image you'll get the data-link. Here is a fiddle of it working.

<script type="text/javascript" language="javascript">
       $(".aclick").click(function (e) {
             e.preventDefault();
             alert($(this).find('img').attr('data-link'));
             var link = $(this).find('img').attr('data-link')
             console.log(link);

       });

</script>

Solution 3:

You can try this,

<script type="text/javascript" language="javascript">
     $(".aclick").click(function (e) {
        e.preventDefault();
        alert($(this).find('img').attr('data-link'));
        var link = $(this).find('img').attr('data-link')
        console.log(link);    
    });
</script>

Solution 4:

In the context, $(this) refers to the link, not the image.

To get the image instead, use:

var link = $('img', $(this)).data('link');

That gets the img element inside the link (which is $(this)).

Read more about the .data()-method here: https://api.jquery.com/data/
In my opinion, it makes it a bit cleaner than using the .attr()-method.

Solution 5:

You assign you data-link attribute in img tag,

so you have to write click event on img tag

    $(".aclick img").click(function (e) {
        e.preventDefault();
        alert($(this).data("link"));
        var link = $(this).data("link");
        console.log(link);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>