Event target matches but function is not called?

Question

Consider the following jquery:

$('.entry-links:not(.entry-links-processed)').each(function(){
        $(this).addClass('entry-links-processed');
        $('li a', this).click(function(event){
            $target = $(event.target);
            var tabPics = $('#tab-pics>a');
            if($target === tabPics){
                tabTest.getPics();
            }
          $('.entry-links li a').removeClass('active');
          $(this).addClass('active');
          var id = $(this).attr('href');
          $('.entry-box:not(' + id + ')').hide();
          $(id).show();
            return false;
        });
    });

I have three tabs or menu items: when you click on one, this code will hide the content portion of the others.

Out of this, the following portion is the focus of this question:

                  $target = $(event.target);
            var tabPics = $('#tab-pics>a');
            if($target === tabPics){
                tabTest.getPics();
            }

As the code snippet shows, I'm trying to call a function when the pictures tab is clicked. Following my code using breakpoints, I see that I'm capturing the $target successfully and yet, even though it matches tabPics, the function call is skipped and the rest of the code runs normally.

If I have matched the $target and tabPics, why would it skip over the function call when I've met the condition in my if statement?

Thanks for the help.

score 3 · Answer 1 · edited May 23 '17 at 11:57

Your original way did not work because you were testing the equality of two different objects:

var $target = $(event.target);
var tabPics = $('#tab-pics>a');

When you call jQuery on a selector or an existing dom element, it returns a version of itself wrapping the elements that it decides to match. Each time this object is different, so the following code:

if ( $target === tabPics ) {
  /// this wont be reached
}

Is the same as saying:

if ( {} === {} ) {
  /// neither will this
}

And whilst the above code both objects visually look the same, even if you do:

if ( {a:123} === {a:123} ) {
  /// nope...
}

JavaScript will still treat the above as false, because when comparing objects using === the objects have to be the exact same object, they can't be different objects with the same content.

The following link could be of use:

How would you compare jQuery objects?

Hope that clears up the confusion. I can see where your logic was going, and in another language it could make sense, it's just not how === works in JavaScript when testing objects.

score 0 · Answer 2 · answered Mar 21 '13 at 06:56

0

You are currently unable to target psuedo selectors in jquery (.entry-link:not) to set CSS properties.

answered Mar 21 '13 at 06:56

Four_lo

1,150
10
28

Thanks for the reply ... I don't think I'm targeting a pseudo selector, am I? The event is happening on the 'a' tag and tabPics stores an element based on ID and the 'a' tag directly after it. Am I missing something? – max7 Mar 21 '13 at 07:28

score 0 · Accepted Answer · answered Mar 21 '13 at 08:08

I resolved the issue. While I still think this code should work:

       if($target === tabPics){
            tabTest.getPics();
        }

It for some reason does not ... but using .is() does indeed work! So now the code looks like this:

            $target = $(event.target);
            var tabPicsLi = $('#tab-pics');
            var tabPics = $('a', tabPicsLi);
            if($target.is(tabPics)){
                tabTest.getPics();
            }

And it works just as it should. That said, if someone should see this post, review my original code construct and see why that particular way didn't work, I would really appreciate a reply. Learning from my mistakes is invaluable to me.

Event target matches but function is not called?

3 Answers3