How to set up a $(document).ready function inside a file loaded by $.getScript

Question

I'm trying to compartmentalize the code for a webpage to load code only when needed. I have one javascript file included in the head section of my page. The page has a button, which when clicked, brings a div to the foreground, then populates the div through the use of $.getScript. The newly loaded content consists of two additional divs and ten buttons. However, the buttons don't work. Whether I put the $('#element').click() code on my main html page, in my primary javascript file or the newly loaded file, it doesn't work. Do I have something incorrectly formatted or is this just something that will never work?

$(document).ready(function() {
        alert("Test");  /*     This works     */
        $('#slideButton1').click(function() {
                alert("Testing");     /*   This doesn't     */
        });
});

Buttons are generated by the following code:

function addGalleryButtons() {
        var sLabels = new Array("Aircraft","Avatars","BattleArmor","BattleMechs","Book Covers","Characters","Lego BattleTech","Maps","Naval Vessels","Vehicles");
        var leftIndent = 15;
        for(var i=0; i<sLabels.length; i++) {
                var slBtn = $(document.createElement('div')).attr('id','slideButton'+i);
                slBtn.addClass('base shadowed rad3 gSlideButton');
                slBtn.html(sLabels[i]);
                var slb = { 'left' : leftIndent+'px' , 'opacity' : '0.7' };
                slBtn.css(slb);
                slBtn.attr('title','slideButton'+i);
                slBtn.appendTo('#gallerySlider');
                leftIndent = leftIndent + $('#slideButton'+i).width() + 12;
        }
}

Answer 1

Your problem is that when you bind to $('#slideButton1') it doesn't exist in the DOM. The solution is to bind to the $('#gallerySlider') element using the on method.

$('#gallerySlider').on( 'click', 'div', function( e ){
  console.log( $( this ), $( this ).attr( 'id' ) );
});

It might be a good idea to give class names to your divs and target them that way.

$('#gallerySlider').on( 'click', '.myClassName', function( e ){ // etc

Answer 2

First of all, it would be great if you could provide a jsFiddle. You do not give information on the order of when those two functions are called.

However, I would have written this in a comment if I could, but due to my insufficient reputation, I just can't. So I'll attempt an approach to your solution here.

Unline czarchaic, I wouldn't use on. I'd use the live method. Check the documentation for additional information, parameter lists, and an example. There are some downsides to this though. Some people dislike this methodology because the live method does eat quite some performance. They prefer delegate because it limits the elements that have to be checked for events. Consider an article like this. I do not remember which article I've read though, but I assume the information is quite similar.

Answer 3

The events aren't being wired because those elements aren't in the DOM yet.. That's why your buttons don't work. I can't help but think what you're really looking for is a way to load scripts on demand. I can personally recommend require.js. It's a JavaScript module loader that will do exactly what you're trying to do. It's pretty straight forward. Get started here. Email me if you need a push.

Answer 4

If you put your event handlers in a function that gets called by the returned javascript you should be fine. function() addHandlers{$('#slideButton1').click(function() { }

Then in at the end of your returned javascript: addHandlers();