从新加载的 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.
    });

但如果我尝试让“下一个”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 的按钮。这也有一个名为“Next”的 div。我希望“下一个”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 的静态父元素。