从已经加载的内容中触发和加载新内容答案

【问题标题】：trigger and .load new content from inside of already .loaded content从已经加载的内容中触发和加载新内容
【发布时间】：2012-05-23 19:28:56
【问题描述】：

我正在尝试加载一些内容，这些内容是通过单击带有 id# 的标签触发的，该标签已经在加载的内容中。

目前我使用这个（波纹管）首先加载内容，运行一个 nivo 滑块，然后我在尝试加载新内容时遇到问题

$(document).ready(function() {
$("#pegasus-tile, #o-w").click(function(){
    $("#proj-content").load("projects/pegasus.html", function(){

        $('<div id="slider" class="nivoSlider"></div>');
        $('#slider').nivoSlider({effect: 'sliceUpDown'}),

    $("#next-pegasus").click(function(){
        $("#proj-content").load("projects/bg-app.html");        

        });
      });
   });
});

【问题讨论】：

还没有，我实现了两个 awnsers，但它们似乎没有工作，我正准备将它构建成一个 jsfiddle，也许在它所在的站点上运行的其他东西正在限制它。所以生病构建一个干净的版本来测试它
好的，如果你想让我看看，把小提琴贴出来
在制作小提琴时遇到问题，我必须从原始站点请求加载的内容，但这似乎想要工作。如果我只是将内容隐藏在页面上，它不会在同一个庄园中工作吗？知道处理此问题的最佳方法是什么，从外部站点调用内容吗？（到目前为止的小提琴我到目前为止制作的小提琴jsfiddle.net/DXdN6）
是的，我知道这会是什么问题:-)
我建议采用原始功能，将其剥离为只做一件事并对其进行调试以查看幕后发生的情况，然后一次再添加一个

标签： jquery ajax jquery-load

【解决方案1】：

看看 .live() 函数。

您的代码不起作用，因为 id 为 next-pegasus 的元素是动态添加的，并且默认的 .click()-Listener 无法“看到”该元素。要使其工作，请为 #next-pegasus 元素实现 click-Listener，如下所示：

$('#next-pegasus').live('click', function() {
    // do the same stuff here ...
});

编辑：

请改用 .on() 函数，因为不推荐使用 .live()。

【讨论】：

不要使用.live，它已被弃用，使用.on
@CD smith，谢谢，我刚刚在 jquery 网站上阅读“从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。老用户jQuery 的版本应该使用 .delegate() 而不是 .live()。"看看你上面的帖子，你能解释一下 .on 和 .empty 之间的区别吗？
.empty 在下一个 .load 之前清空元素的内容，因此如果该元素中有文本，.empty 确保内容被删除 api.jquery.com/empty

【解决方案2】：

在下一个 .load 之前运行 .empty

$(document).ready(function() {
    $("#pegasus-tile, #o-w").click(function(){
        $("#proj-content").empty().load("projects/pegasus.html", function(){
            $('<div id="slider" class="nivoSlider"></div>');
            $('#slider').nivoSlider({effect: 'sliceUpDown'}),
    $("#next-pegasus").click(function(){
        $("#proj-content").empty().load("projects/bg-app.html");        

        });
      });
   });
});

【讨论】：

终于搞定了！不知道它是什么，但我从头开始重建并使用了上面的代码，因为它的工作方式，即清空然后加载，当你在新的 div 之前获得清空 div 的闪存时，会有一个“跳跃”。使用 .on() 可以解决这个问题，假设它使动态添加的元素以不同的方式可见？