0

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.

Improve this question
5
  • Are you 100% sure on your $('.ajaxForm') selector? If you use Firebug or the Chrome console and run it, does it actually return the element(s) on the page you're expecting? Could you post the HTML markup from the page? At least the form section. Edit: I just now realized you said you double/triple checked the selector. Regardless, the markup would be helpful. Commented Aug 3, 2012 at 15:41
  • 1
    did you try alert('click'); ? Commented Aug 3, 2012 at 15:41
  • 1
    Your code creates a function that is never called. Commented Aug 3, 2012 at 15:43
  • 1
    @Gromer - I'm sure the selector is correct. Just posted the corresponding HTML as well. I can see the class when I inspect element in Firefox as well. Commented Aug 3, 2012 at 15:44
  • can you try alert('click'); as bobek said or $(".ajaxForm").hide() or some thing other than click to just to see you are getting into document.ready function Commented Aug 3, 2012 at 15:55

5 Answers 5

Reset to default
6

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

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

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

1 Comment

It is correct, however it isn't a self invoking function as the TS wants. You can use this if you have for example multiple frameworks included, and you would like to use the $ function in your jQuery code...
4

Something like this should work:

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

Comments

3

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)
Improve this answer

1 Comment

Thank you! Spot on, how I missed that I don't know.... probably due to the whole day in front of a screen staring at various languages.
3

Try:

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

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

Improve this answer

1 Comment

Thanks for your response, still no change though.
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.