Issues using $.ajax

I want to load the lightbox jav开发者_高级运维ascript only when a certain condition is satisfied so I'm loading it using $.ajax like so:

$.ajax({ url: "../static/js/lightbox.js", dataType: 'script', cache: true, success: function() {
    alert('loaded');
    $("a.lightbox").lightbox({
        opacity: "0.6",
        width: "940"
    });
}});

I see the "loaded" alert but the lightbox does not work. However, when I load the file directly (script src) from the HTML, lightbox works. How do I fix this?

Many thanks for your help.

---

You'll want to use $.getScript() for this (shorter, but slightly different caching effect), for example:

$.getScript("../static/js/lightbox.js", function() {
  $("a.lightbox").lightbox({
    opacity: "0.6",
    width: "940"
  });
});

---

Does the script get properly downloaded? Do you see the 'loaded' alert? If I were you I would put an alert in lightbox.js to see if is properly executed after downloading. Also check for JavaScript errors.

---

The issue is the js is not still part of the DOM. Its correct that you get the lightbox.js but its not ready for execution. To get a js file dynamically, you will have to use getScript method instead of ajax. Have a look at the API: http://api.jquery.com/jQuery.getScript/