3

我有新的 div 我正在加载到名为“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. 
                });
        }

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

4

3 回答 3

3

您可以使用委托事件来解决问题：

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

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

于 2012-11-29T22:37:47.923 回答
1

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

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"元素接收点击事件。

于 2012-11-29T22:38:26.983 回答
0

需要委托事件强调文字

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

});

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

于 2012-11-29T22:39:41.777 回答