编辑：

Question

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

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

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

以下是代码： 主页：

<body>
<a href="#" id="load">Load</a>
<div id="holder"></div>

</body>

内容页面

<body>
<section id="1">
Content 111
<a href="#" id="show">Show...</a>
<div id="showhere"></div>
</section>
<section id="2">
Content 222
</section>

</body>

脚本

$(document).ready(function() {


   $("#load").click(function() {
        $('#holder')
           .html('<div> Loading</div>')
           .load('content.html #1');
    });

$("#show").click(function() {
        $('#showhere')
           .html('<p>here it is</p>')
    });

 });

编辑：

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

EDIT2：

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

$("#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('<p>here it is</p>')
    });
 });

Answer 2

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

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

Answer 3

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

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

Answer 4

原因是，当您尝试连接处理程序时，元素不存在，因此没有任何内容可以连接。

你可以

使用load回调并在元素实际存在后直接挂钩，或
使用事件委托

1。 `load`回调

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

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

2。事件代表团

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

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

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

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

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

...但我更倾向于将on用于直接处理程序，将delegate用于委派的用途。

在下面的评论中，您已经说过了

...问题是我在加载的内容中有很多功能，有没有什么方法可以让他们在不重新编码的情况下工作？

我猜测你的意思是什么？＃34;在加载的内容中的功能＆＃34;就是你在content.html中使用JavaScript来处理其中的元素，并且你想在这个文件中重用相同的脚本。

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

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

您的主页会从上面＃1中提到的ready回调中拨打contentPageHookUpNiftyEvents。

Jquery无法处理加载的内容

编辑：

EDIT2：

4 个答案:

1。 `load`回调

2。事件代表团

Jquery无法处理加载的内容

编辑：

EDIT2：

4 个答案:

1。 load回调

2。事件代表团

1。 `load`回调