Question

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.

Answer 1

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)