从新加载的 div 调用 jQuery 函数

Question

我有新的 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 的函数？

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

我想我也许可以使用类似...

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

更新： 完整的代码可以在名为 testing.php 的页面上看到 http://beaubird.com/testing.php 单击名为 STORY 的第一个按钮。然后注意底部名为 Next 的按钮。这也有一个 div 名称为“Next”。我希望“下一个”div 能够加载更多故事并控制页面上的其他元素。

第 366 行是我调用此代码的地方：

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

有什么想法吗？非常感谢！

Answer 1

您可以使用delegated events 来解决问题：

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

这里我们将.CoolBox 视为#Next 的静态父元素。

Answer 2

我希望你已经展示了接下来添加的代码。但是没有看到它，试试这个：

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

编辑

如果你想走这条路，这里是一个事件委托的例子：http://jsfiddle.net/k3fvd/

具体说明

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

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

正在按预期工作。也许意料之外的是div id="layer2" 正在窃取点击事件，因为它在z-index 或元素列表中以某种方式更高。我不完全确定是什么原因造成的，也许是所有的 div 都被定义为display:block; 并且以某种方式覆盖了position:absolute;。一个简单的解决方法是为position:absolute; 提供更多的特异性，如下所示：

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

请注意，position:absolute important!; 已被编辑。这应该允许您的 div id="Next" 元素接收点击事件。

Answer 3

需要委派事件强调文字

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

});

"body" 可以替换为静态祖先。