2

它似乎有一个简单的解决方案，但我还想不通，有一千个类似的主题，但没有一个对我有用，所以我以一种非常简单的方式问这个问题，

我有一个按钮，比如说按钮“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 脚本在加载的内容上工作，也许在加载内容后进行某种重置或重新加载？

编辑2：

好吧，我还没有找到解决方案，所以我决定更改我的代码，我将 .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 内容的函数？

4

4 回答 4

3

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

$("#holder").on("click", "#show", function() {
        $('#showhere').html('<p>here it is</p>')
    });
 });
于 2012-12-23T12:09:51.577 回答
2

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

 $("#show").on("click","#show",function() {
       $('#showhere').html('<p>here it is</p>')
 });
于 2012-12-23T12:09:39.567 回答
1

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

$("#show").live("click",function() {
    $('#showhere').html('<p>here it is</p>')
});
于 2012-12-23T12:28:23.587 回答
0

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

你可以

  1. 一旦元素实际存在，使用load回调并直接连接，或者

  2. 使用事件委托

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委托处理程序的清晰性。

在下面的评论中，你说过

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

我猜你所说的“加载内容中的函数”的意思是你有 JavaScriptcontent.html可以在其中的元素上工作，并且你想在这个文件中重用相同的脚本。

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

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

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

于 2012-12-23T12:12:16.697 回答