Jquery add class not working?

Question

Here is my jQuery:

$('.portfoliopod').on('click', function(){
    $('.portfoliopod').addClass('current');
});

and my HTML:

<div class="portfoliopod">
<img class="portfolioimage" src="aboutme.jpg">
<div class="portfoliopodmessage">testing 123</div>
</div>

When I click the "portfolio pod" section the class "current" is not added. Am i missing something obvious here?

Is your jQuery within a document ready handler or at the end of the document? If it is, it works fine for me jsfiddle.net/j08691/3xjqmuqg — j08691
– j08691, Commented Oct 6, 2014 at 13:54
Think you may have answered my question. The jQUery is pulling in that section through PHP after the DOM has loaded. Is that why this is happening? — red house 87
– red house 87, Commented Oct 6, 2014 at 13:55
my javascript starts off like so: jQuery.noConflict(); (function ($) { and all the code here. i guess this means it doesnt wait till its loaded? — red house 87
– red house 87, Commented Oct 6, 2014 at 13:56
@BenLiger Sounds like a case of event delegation: stackoverflow.com/questions/203198/… — George
– George, Commented Oct 6, 2014 at 13:56

Community · Accepted Answer · 2017-05-23 12:27:18Z

1

As OP said "on click of a button the portoflio is loaded through PHP", I assume the portfolio content is loaded via AJAX. So, you have to use this to listen the event on the element :

jQuery(document).on('click', '.portfoliopod', function(){
    jQuery('.portfoliopod').addClass('current');
});

As the .portfoliopod element is a dynamically created element, the code you're currently using won't bind the event to element that is going to come in the DOM tree later.

So, the way of binding the listener is to bind it on document and check if the element clicked on document is .portfoliopod. See this.

Also, it seems like on your site, $ is undefined (very strange). So, use jQuery instead.

Or, if you want the $ object, add this code at the very end of your jQuery file before })(window); :

window.jQuery = window.$ = jQuery;

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Oct 6, 2014 at 14:09

Subin

3,5731 gold badge36 silver badges65 bronze badges

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

3 Comments

j08691 Over a year ago

Probably want $(document).on('click', not $('.portfoliopod').on('click', if portfoliopod is part of what's loaded dynamically.

red house 87 Over a year ago

Still can't get it to work. Heres the site if it helps at all:benliger.webatu.com

red house 87 Over a year ago

Makes perfect sense, Thats a lot @Subin

Sarath Kumar · Accepted Answer · 2014-10-06 13:58:31Z

0

check it by using this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="portfoliopod">
<img class="portfolioimage" src="aboutme.jpg">
<div class="portfoliopodmessage">testing 123</div>
</div>
<script>
$('.portfoliopod').on('click', function(){
    $('.portfoliopod').addClass('current');
});</script>

if this code works then , the fault is with the inclution of jquery script.

answered Oct 6, 2014 at 13:58

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

2 Comments

red house 87 Over a year ago

I tried adding your script at the start of the PHP page its loading in and i still get nothing

Sarath Kumar Over a year ago

kindly verify by "inspect element " on click on <div class="portfoliopod"> the class name is added and the result is <div class="portfoliopod current">

Collectives™ on Stack Overflow

Jquery add class not working?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related