Question

I have new div I am loading into my main page called “Next”. The “Next” div is a button that is on a page called Story.php I am loading it with this code.

$('.CoolBox').load('Story.php', function() 
    {
 /// The "Next div" is NOW on display but not recognized by main page that loaded it.
    });

But if I try to make the “Next” div call a function or clickable it does not work.

$("#Next").click(function() 
    {
/// Run my code. Call a function?

    });

I realize there are two options. Put the code in the page I am loading so the jQuery can see the “Next” div. I did that and it works fine when I load the “Story.php” page alone, but when I load that page into the main page it no longer works.

This same concept I need to apply to functions as well. How can I create functions that call divs that are not yet loaded on to the page?

Would I put the functions in the Story.php that can access the divs on that page or do I put the functions on the main page and somehow “register” the newly loaded divs?

I am thinking I might be able to use something like…

document.getElementById("#Next") /// but what is the full code I use?

UPDATE:
The full code can be seen here on a page called testing.php
http://beaubird.com/testing.php
Click on the first button called STORY. Then watch for a button at bottom called Next. This is also has a div name of “Next”. I want the “Next” div to be able to load more of the story and control other elements on the page.

On line #366 is where I call this code:

$('.CoolBox').load('Story.php', function() 
                {
        /// it loads this page http://www.BeauBird.com/Story.php
                // Where the Next div is contained. 
                });
        }

Any thoughts? Thanks so much!

Answer 1

I wish you had showed the code which added next. But without seeing it, try this:

var nxt = document.createElement("div");
$(nxt).click(function(){ /* code */ };
someNode.appendChild(nxt);

Edit

Here is an example for event delegation if you wish to go that route: http://jsfiddle.net/k3fvd/

Specifics

In the page linked, the delegated code

$(".CoolBox").on("click","#Next",function(){
  /* code */
});

is working as intended. Perhaps what was unintended is that the div id="layer2" is stealing the click event because it is higher on the z-index or element list somehow. I am not entirely sure what is causing this, perhaps it is that all divs are defined as display:block; and that is somehow overwriting the position:absolute;. A simple workaround for this is to give more specificity to the position:absolute; like this:

    #layer2  {
position: absolute important!; 
left: 1px;
top: 0px;
z-index: 3;
width: 1246px;
height: 1031px;
margin-left: 0px;
margin-top: 0px;
background-image: url(sg_jesus_media/layer2.gif);
background-repeat: no-repeat;
}

Note that position:absolute important!; has been edited. This should allow your div id="Next" element to receive the click event.