0

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?

red house 87
  • 1,837
  • 9
  • 50
  • 99
  • 3
    Is your jQuery within a document ready handler or at the end of the document? If it is, it works fine for me http://jsfiddle.net/j08691/3xjqmuqg/ – j08691 Oct 06 '14 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 Oct 06 '14 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 Oct 06 '14 at 13:56
  • @BenLiger Sounds like a case of event delegation: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – George Oct 06 '14 at 13:56
  • Could you please elaborate George? – red house 87 Oct 06 '14 at 13:57
  • Code looks fine, as j08691 has suggested, its most likely that at the time the script is run, the element does not yet exist. Wrap the code in a ready handler and it should work fine. – wf4 Oct 06 '14 at 13:57
  • @BenLiger Yep, sorry. Was finding the link. Think its a duplicate. – George Oct 06 '14 at 13:57
  • Are you saying that the HTML is loaded after the page is loaded, like via AJAX? I'm unclear on your first comment. – j08691 Oct 06 '14 at 13:58
  • So on click of a button the portoflio is loaded through PHP – red house 87 Oct 06 '14 at 14:01
  • Read up on .on()'s event delegation syntax. – j08691 Oct 06 '14 at 14:09

2 Answers2

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;
Community
  • 1
  • 1
Subin
  • 3,445
  • 1
  • 34
  • 63
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.

Sarath
  • 2,318
  • 1
  • 12
  • 24