CODEWITHSUNDEEP
jquery
Daniel Groves
Daniel Groves

Reputation: 472

jQuery Click event not fireing

In a nutshell, I have a click event and it doesn't seem to be firing. jQuery is being loaded, and this is what I have for the jQuery:

<script type="text/javascript">
(function($) {
    $(".ajaxForm").click(function() {
        console.log('click');
    });
});
</script>

And the HTML

<div class="right">
<span class="ajaxForm" type="ajax"><span>Get Quote</span></span>
</div>

It's probably just me being stupid, it's been a long day. Anything stand out as being wrong? I've checked, double checked and triple checked the selector.

Upvotes: 0

Views: 128

Answers (5)

Chris
Chris

Reputation: 27384

Just to throw a spanner in the works...

$(".ajaxForm").on('click',function() {
    console.log('click');
});

On (similar to live) is actually faster then .click() and doesnt require the DOM to be ready

Upvotes: 0

Styxxy
Styxxy

Reputation: 7517

You created the anonymous function, but you forgot to invoke it (self-invoking function). In this case, you will have to call it directly with the jQuery object as parameter. Code:

<script type="text/javascript">
(function($) {
    $(".ajaxForm").click(function() {
        console.log('click');
    });
})(jQuery);
</script>

Obviously this function has to be called after that the DOM is loaded or after the .ajaxForm elements (otherwise he won't find the elements to attach the event on and the event won't be attached to the elements you want).

If you want this function in the HEAD (or another JavaScript file), you will have to this:

(function($) {
    $(document).ready(function() {
        $(".ajaxForm").click(function() {
            console.log("click");
        });
    });
})(jQuery)

Upvotes: 3

zmarks22
zmarks22

Reputation: 318

function($) is incorrect. Try $(function(){});

http://api.jquery.com/ready/

Upvotes: 6

Matthew Dresser
Matthew Dresser

Reputation: 11442

Something like this should work:

<script type="text/javascript">
$(document).ready(function() {
    $(".ajaxForm").click(function() {
        console.log('click');
    });
});
</script>

Upvotes: 4

Curtis
Curtis

Reputation: 103338

Try:

$(function(){
    $(".ajaxForm").click(function() {
        console.log('click');
    });
});

Notice the difference in the syntax with the first line of code.

Upvotes: 3

Related Questions