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的按钮。这个也有一个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. 
                });
        }

有什么想法？非常感谢！

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"正在窃取click事件，因为它在某种程度上在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"可以替换为静态祖先。

jQuery从新加载的div调用函数

3 个答案: