jquery if image has attribute on click

Question

I am just learning how to use jquery correctly and I cannot seem to figure out why this approach doesn't stop the anchor from redirecting.

Basically, I want to check if an image has a certain data tag in its anchor and when clicked it stops the link and does something (basically making my own light box).

html

<ul class="imageList imgListIntro">
    <li>
        <a href="img/cc/intro-1.jpg"  
           data-ocular="test-1" 
           data-title="Test" 
           class="hvr-wobble-vertical">
            <img src="img/cc/intro-1.jpg" class="" />
        </a>
    </li>
</ul>

js

if ($('img a').attr('data-ocular')){
    $('img a').click(function(event) {
        event.preventDefault();
        alert('Ocular Tag');
    });              
}

$('a[data-ocular]') should work - it means select all the a tags that have a data-ocular attribute. — user2182349
– user2182349, Commented Jun 2, 2015 at 21:53
I think it should be noted that <img /> elements should never contain other elements (it's an empty element, and self closing), so the selector img a doesn't make sense from the get go. Most of the answers seem to have missed this. — Oka
– Oka, Commented Jun 2, 2015 at 21:58
We didn't miss it. It's just not part of the question, and his markup doesn't actually include anything inside the image tag. Only his selector is wrong. — ChevCast
– ChevCast, Commented Jun 2, 2015 at 22:03

Travis J · Accepted Answer · 2015-06-02 21:59:55Z

1

There were a few issues with your code. First, using the if statement to check for the selector's existence isn't required. That is because jQuery will fail silently and as a result if the selector is not matched then nothing happens. So just directly assign the event handler.

Mainly, the selector used was incorrect as it was slightly backwards and did not take into account the data- attribute. In selection, the parent -> child references go from left to right. So the left is the parent and the right most are the children in order. In this case we want to have an anchor element with a data attribute which contains an image. That would look like this $('a[data-ocular] img')

$('a[data-ocular] img').click(function(event) {
  event.preventDefault();
  alert('Ocular Tag');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="imageList imgListIntro">
  <li>
    <a href="img/cc/intro-1.jpg"  data-ocular="test-1" data-title="Test" class="hvr-wobble-vertical"><img src="img/cc/intro-1.jpg" class=""></a>
  </li>
</ul>

answered Jun 2, 2015 at 21:59

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

4 Comments

Packy Over a year ago

Thanks for the great explanation. It makes complete sense now. Side question: can I add [attribute name] after any element to check if it exists? like $('img[data-title]')

Travis J Over a year ago

@Packy - Yes you can, that would also work. You can also see the whole list of selectors available here: api.jquery.com/category/selectors

Travis J Over a year ago

@Packy - The selectors used by jQuery are basically css selectors. It essentially wraps the document.querySelector (there is also querySelectorAll) feature of native javascript. See more on selectors in general here: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/… and here: w3.org/TR/selectors-api/#grammar

Packy Over a year ago

Thanks. This makes so much more sense now.

Gary Storey · Accepted Answer · 2015-06-02 21:55:24Z

1

The a tag is not a child of the img tag. It's reversed. But you can reduce that to:

$('a[data-ocular]').on('click', function(event) {
   event.preventDefault();
   alert('Ocular Tag');
});

answered Jun 2, 2015 at 21:55

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

Comments

Scott 'scm6079' · Accepted Answer · 2015-06-02 21:55:50Z

1

Just bind based on a CSS selector. In this case, bind all "a" tags with the attribute data-ocular.

      $('a[data-ocular]').click(function(event) {
          event.preventDefault();
          alert('Ocular Tag');
          return false;
      });

answered Jun 2, 2015 at 21:55

Scott 'scm6079'

1,57713 silver badges27 bronze badges

Comments

ChevCast · Accepted Answer · 2015-06-02 21:59:51Z

0

Try using the attribute selector: $('a[data-ocular]').

$('a[data-ocular]').click(function (event) {
  event.preventDefault();
  alert($(this).attr('data-ocular'));
});

In English this says: "Select all anchor tags with the attribute 'data-ocular' and add this click handler to them." The click handler prevents the default click behavior of the anchor and then it shows an alert with the value of the data-ocular attribute on the link that was clicked. this refers to the element that was clicked and wrapping it with $(this) gives you the JQuery sugar that allows you to call .attr and get the attribute value.

Demo: http://codepen.io/Chevex/pen/qdrqYm

edited Jun 2, 2015 at 21:59

answered Jun 2, 2015 at 21:53

ChevCast

59.4k66 gold badges223 silver badges331 bronze badges

Collectives™ on Stack Overflow

jquery if image has attribute on click

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related