从新加载的div调用jQuery函数

我有一个新的div，我正在加载到我的主页“Next”。“Next”div是一个按钮，它位于一个名为Story.php的页面上。我正在用这段代码加载它

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

但是，如果我试图使“Next”div调用成为一个函数或可单击，它将不起作用

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

    });

我意识到有两种选择。将代码放在我正在加载的页面中，以便jQuery可以看到“Next”div。我这样做了，当我单独加载“Story.php”页面时，它工作正常，但当我将该页面加载到主页时，它就不再工作了

我也需要将这个概念应用到函数中。如何创建调用尚未加载到页面上的div的函数

我是将函数放在Story.php中，以便访问该页面上的div，还是将函数放在主页上，然后以某种方式“注册”新加载的div

我在想我也许可以使用像

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

更新： 完整的代码可以在这里的testing.php页面上看到 单击第一个名为“故事”的按钮。然后在底部观察一个名为“下一步”的按钮。它还有一个div名称“Next”。我希望“Next”div能够加载更多的故事并控制页面上的其他元素

在线#366是我称之为代码的地方：

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

有什么想法吗？非常感谢

您可以使用以下方法解决此问题：

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

---

这里我们考虑<代码> CoolBox < /C>作为<代码>的静态父元素>下一个

< P>我希望你已经显示了下一个添加的代码。但在看不到的情况下，尝试以下方法：

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

编辑

下面是一个活动委派的示例，如果您希望走这条路线：

细节

在链接的页面中，委托代码

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

正在按预期工作。也许出乎意料的是，

div id=“layer2”

正在窃取click事件，因为它在z索引或元素列表中的位置更高。我不完全确定是什么原因导致了这种情况，可能是因为所有div都被定义为

display:block并且不知何故覆盖了
位置：绝对。对此，一个简单的解决方法是为
位置提供更多的特殊性：绝对如下所示：

    #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;
}

注意
位置：绝对重要已编辑。这将允许您的
div id=“Next”
元素接收单击事件。
需要将事件委托给重点文本

$("body").on('click', "#Next" ,function() {

});

“body”
可以替换为静态祖先。
如果
#Next
不嵌套在
中，您也可以添加一个注释。Coolbox
@TravisJ您可以用任何适当的信息来完成我的回答；）我试过这个方法，但不起作用。这里是这个网站的完整代码：点击“故事”加载。然后你会看到下一个按钮是一个标志。。。加载到第页。查看代码并在225处查看您的代码行。它看不到加载的#下一个div，单击时也不会隐藏。@JamesMontagne-它是显示的创建的注释版本。。。“
//现在显示“下一个div”
”。使用此方法，根据范围，可以将细节添加到单击事件中，而不是像其他答案所建议的一般委托。@PapaDeBeau-我已经意识到您的问题所在，请参阅我上次编辑的解释。非常感谢。好的，但只有当我打开firebug时它才会工作。真奇怪。我更新了代码，你可以看到我在说什么。使用firefox，我想我找到了答案。有一个名为“BeauIntro”的div，它可能覆盖了其他div。我把它取了下来，它似乎起作用了。你太棒了！我也试过这个方法，但不起作用。这里是这个网站的完整代码：点击“故事”加载。然后你会看到下一个按钮，它是底部的一个标志。查看代码并在#233处查看您的代码行。它看不到加载的#下一个div，单击时也不会隐藏。