Wordpress jQuery click event

Question

I have this code here that should send off an alert...

jQuery(".wpcart_gallery .thickbox").click(function($){
            alert('hi');
        });

But it doesnt work :( there are no errors and the alert never appears. I have the correct JQuery.js file in my header...is there something wrong with my syntax?

Here is the HTML code

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
<a class="thickbox cboxElement" href="DSC_0037.jpg" rev="DSC_0037.jpg"></a>
<a class="thickbox cboxElement" href="DSC_0036.jpg"  rev="DSC_0036.jpg"></a>
<a class="thickbox cboxElement" href="DSC_0118.jpg" rev="DSC_0118.jpg"></a>
</div>

I am trying to have a click event when one of the links inside wpcart_gallery is clicked.

Here is the page, blow the big image there are three images, I am looking for click event to trigger if any of those images are clicked...http://www.taranmarlowjewelry.com/?wpsc-product=product-1-2

Is that JavaScript within a $(document).ready(function() { ... }); call? Can you provide the site or a jsFiddle in which this is observable? — Cat
– Cat, Commented Sep 17, 2012 at 20:32
Yes it is inside a jQuery('document').ready(function($){....}); — user1269625
– user1269625, Commented Sep 17, 2012 at 20:34
'document' and document are different. Remove the 's and try it. — Cat
– Cat, Commented Sep 17, 2012 at 20:35

user1269625 · Accepted Answer · 2012-09-17 20:45:40Z

3

I fixed the issue by

jQuery(".wpcart_gallery img").click(function($){
            alert('hi');
        });

answered Sep 17, 2012 at 20:45

user1269625

3,21926 gold badges82 silver badges114 bronze badges

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

Comments

Abe Miessler · Accepted Answer · 2012-09-17 20:33:37Z

2

Could be that you have invalid HTML. None of the following have closing tags:

<a class="thickbox cboxElement" href="DSC_0037.jpg" rev="DSC_0037.jpg">
<a class="thickbox cboxElement" href="DSC_0036.jpg"  rev="DSC_0036.jpg">
<a class="thickbox cboxElement" href="DSC_0118.jpg" rev="DSC_0118.jpg">

If I were jQuery I'd be confused.

If I add closing tags it works fine: http://jsfiddle.net/GtgEy/

answered Sep 17, 2012 at 20:33

Abe Miessler

85.7k104 gold badges324 silver badges496 bronze badges

1 Comment

user1269625 Over a year ago

Yes they have those, just forgot to put them in

BLSully · Accepted Answer · 2012-09-17 20:38:25Z

0

Likely you need to use delegated bindings:

jQuery(window).on('click', ".wpcart_gallery .thickbox", function(ev){
    alert('hi');

    ev.preventDefault();
});

You can replace window with some other parent element if you can. Given:

<div id="test">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
</div>

you could do:

jQuery("#test").on('click', 'a', function(ev) {
    alert('hi');

    ev.preventDefault();
});

edited Sep 17, 2012 at 20:38

answered Sep 17, 2012 at 20:33

BLSully

5,9291 gold badge29 silver badges46 bronze badges

Collectives™ on Stack Overflow

Wordpress jQuery click event

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related