Javascript/JQuery class selector issue

Question

I am having an issue with a single line of javascript/jquery. I am attempting to select all objects with a given class and then create a trigger on another object using the id stored in the first objects class.

The JS/JQ:
$('.navs').click(function(){$("#"+$(this).attr('tab')+"").trigger('click');})

The HTML:
<img alt="" class="thumbnail" src="gamedev_thumb.png" class="navs" tab="gamedev"/>

I am not sure if this matters, but this code is in a page fragment that is loaded into a div on the main page. I have tabs at the top to control navigation, and for simplicity I would like the image to trigger a click on the appropriate tab on top.

Didier Ghys · Accepted Answer · 2012-02-03 20:59:51Z

5

You have two times a class attribute. You can definitely put several class names within the same class attribute:

<img alt="" class="thumbnail navs" src="gamedev_thumb.png" tab="gamedev"/>

If the fragment is loaded with ajax after the page has loaded, unfortunately, your selector $('.navs') has already run and your image will not be part of it, you have to execute your piece of javascript after the fragment has loaded and been appended to the document.

I don't know how you load the fragment but one way is to use the callback of the .load() method if you used it:

$('#mydiv').load(url, function() {
    $('.navs').click(function(){
        $("#"+ $(this).attr('tab') + "").trigger('click');
    })
});

Note that if you load a fragment with the load method (for instance "mypage.html #mydiv"), all javascript blocks will be removed.

jQuery .load()

edited Feb 3, 2012 at 20:59

answered Feb 3, 2012 at 20:52

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

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

4 Comments

Dustin Cowles Over a year ago

I put the JS in the page fragment so it runs when the page is loaded. Correcting the class tag fixed it. Thanks so much!

Ben Barden Over a year ago

If the answer he gave you fixed your problem, you should mark it as such.

Dustin Cowles Over a year ago

I had to wait for it to let me :) I just now came back to do so.

Didier Ghys Over a year ago

Glad it helped you ! Anytime :-)

Collectives™ on Stack Overflow

Javascript/JQuery class selector issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related