Jquery无法处理加载的内容

它似乎有一个简单的解决方案，但我无法弄明白，有一千个类似的主题，但没有一个对我有用，所以我以一个非常简单的方式提出这个问题，

我有一个按钮，按下“A”按钮，我想在点击此按钮时加载外部页面的一部分，

加载该部分后，还有另一个按钮（“B”）（在加载的内容中）使用jQuery显示一些隐藏的内容，问题是第二个按钮不起作用。 我尝试使用.load（’content.html＃1，script’）设置超时; ＆…

以下是代码： 主页：

 Load 
  

内容页面：

  
 Content 111 Show... 
 
 
 Content 222 
  

脚本

 $(document).ready(function() { $("#load").click(function() { $('#holder') .html('
 Loading
') .load('content.html #1'); }); $("#show").click(function() { $('#showhere') .html('
here it is
') }); }); 

编辑：

感谢所有人的完美答案，对于这种情况，我认为最简单和最简单的将是使用.live但事情是这只是一个使事情变得不复杂的样本，在实际项目中我有一个复杂的jquery要在加载内容，它不仅仅是添加一个.html元素，所以基本上，我要求一个解决方案，使java脚本在加载的内容上工作，也许在内容加载后进行某种重置或重新加载？

EDIT2：

好吧，我还没有找到解决方案，所以我决定更改我的代码，我正在添加.live到所有function，但还有另一个问题，我明白，对于事件，我必须使用像

 $("#show").live("click",function() { 

代替

  $("#show").click(function() { 

但是还有很多东西不在函数中，比如：

 var $itval = $("#holder li").length; $(".filters li input[value*='all']").parent().find('span').html($itval); $("#holder li, .played").show(); $(".entry-made").hide(); 

有没有办法包装一个不影响整个jquery东西的函数？

Answer 1

使用.on（）的委托版本将事件处理程序“扩展”为动态加载的内容

 $("#holder").on("click", "#show", function() { $('#showhere').html('
here it is
') }); }); 

Answer 2

使用.on方法将事件绑定到动态添加的元素。

  $("#show").on("click","#show",function() { $('#showhere').html('
here it is
') }); 

Answer 3

您也可以在这种情况下使用实时绑定。 将您当前的“#show onclick”替换为此版本。

 $("#show").live("click",function() { $('#showhere').html('
here it is
') }); 

Answer 4

原因是，当您尝试连接处理程序时，该元素不存在 ，因此没有任何东西被连接起来。

你也可以

1. 一旦元素实际存在，就使用load callback并直接挂钩，或者

2. 使用事件委托

1. load回调

如果要连接到已加载内容中的特定元素，请使用load回调：

 $("#load").click(function() { $('#holder') .html('
 Loading
') .load('content.html #1', function() { // <== This is the callback $("#show").click(function() { $('#showhere') .html('
here it is
') }); }); }); 

2.活动授权

现在，如果您要加载和卸载要响应事件的大量内容，可以考虑使用事件委派 。 这就是你在容器上挂钩事件的地方，但是告诉jQuery只有当它实际上是在容器的匹配后代上启动时才让你知道它发生了。

在您的情况下，您的#holder作为容器是有意义的：

 $("#load").click(function() { $('#holder') .html('
 Loading
') .load('content.html #1') .delegate("#show", "click", function() { $('#showhere') .html('
here it is
') }); }); 

在那里我使用delegate来设置委托事件处理程序。 你也可以使用荒谬的重载（注意参数的顺序是不同的）：

  .on("click", "#show", function() { 

…但我更倾向于明确使用直接处理程序和delegate委托代理。

---

你在下面的评论中说过

…问题是我在加载的内容中有很多function，有没有什么方法可以让你的工作没有重新编码？

我猜你所说的“加载内容中的函数”是指你在content.html中使用JavaScript来处理其中的元素，并且你想在这个文件中重用相同的脚本。

你这样做的方法是将该脚本放在自己的JavaScript文件中，并让content.html和主页引用该文件。 让脚本在加载时不执行 ，但定义函数（如contentPageHookUpNiftyEvents ）。

content.html可以在加载后立即调用该函数（如果您将script标记放在文件的底部，则应该直接调用，或者如果您有理由不这样做，则可以直接调用）。

您的主页面将从上面＃1中提到的load回调调用contentPageHookUpNiftyEvents 。