Using $.ajax inside .click(function () {?

Question

This works:

$(function(){

    $.ajax({
      url: 'http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js',
      async: false,
      dataType: "script",
    });

});

However this doesn't:

$("a#trigger").click(function(){

    $.ajax({
      url: 'http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js',
      async: false,
      dataType: "script",
    });

});

This is a seasonal hack for a site (not mine), so it doesn't have to be perfect. Just need to be able to load an external .js file on click.

Thanks :).

how does it not work? what kind of errors are you getting? the code looks fine. — kennypu
– kennypu, Commented Dec 13, 2012 at 3:40
Is there a good reason why are you loading the script in a synchronous manner? — Ja͢ck
– Ja͢ck, Commented Dec 13, 2012 at 3:45
Maybe show us the html? The second version looks ok, the issue must be somewhere else. — Christophe
– Christophe, Commented Dec 13, 2012 at 3:49
@Christian You really should be specifying error just in case the request fails. In this case, that's not the problem at all, but it's something you probably want to include when using AJAX — Ian
– Ian, Commented Dec 13, 2012 at 4:14

I Hate Lazy · Accepted Answer · 2012-12-13 03:40:42Z

3

You removed the "DOM ready" code. Put it back in and it should work again.

$(function() {
    $("a#trigger").click(function(){

        $.ajax({
          url: 'http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js',
          async: false,
          dataType: "script",
        });

    });
});

When you put your script at the top of the page, it runs immediately instead of waiting for the rest of the page to load.

By binding your handler in the DOM ready handler, it won't run until the document has loaded.

Also, make sure your selector matches your targeted element correctly.

answered Dec 13, 2012 at 3:40

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

9 Comments

Christian Over a year ago

Thanks. However, any variation of document.ready either inside head or body returns the same result. Nothing happens on click. :/

I Hate Lazy Over a year ago

@Christian: Then your handler is not bound. Make sure you're not reusing the same ID on the page, and remove the a from the selector. It's not necessary since IDs must be unique.

qooplmao Over a year ago

Like this guy says. Without the $(function(){})/$(document).ready()/etc the events will be bound before the DOM elements have been generated, so will be bound to nothing. Also any id (#trigger) should be unique so you shouldn't need to specify what kind of element it is attached to (a). If you specifically don't want to use initialize you could use $(document).on('click', '#trigger', function(){}) which just watches the document rather than a specific element.

mpen Over a year ago

@Christian: Your event is firing, and you are getting the data back: i.imgur.com/dX7Or.png You're just not doing anything with it. Or rather.. it's not running.

Christian Over a year ago

Thank for that Mark. Forgive me for my naivety, but how would one "do" something with it? Literally just need that code dumped anywhere in the body tag.

|

Christophe · Accepted Answer · 2012-12-13 06:04:00Z

0

I tried your demos and the issue is explained in the code itself:

Initializes after body onload() by default (via addEventHandler() call at bottom.) To customize properties, edit below or override configuration after this script has run (but before body.onload), eg. snowStorm.snowStick = false;

Your issue is that in the second scenario you load the script after the page has finished loading, so your script is never initialized.

[Update] I have set up a live demo. Compare:

on DOM ready: http://jsfiddle.net/4gnxk/
on load: http://jsfiddle.net/4gnxk/1/

The only difference between the two is the left side setting (DOM ready vs. onload)

edited Dec 13, 2012 at 6:04

answered Dec 13, 2012 at 5:41

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Collectives™ on Stack Overflow

Using $.ajax inside .click(function () {?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related