Jquery在加载的内容中不工作_Jquery

Jquery在加载的内容中不工作

jquery

Jquery在加载的内容中不工作,jquery,Jquery,这似乎有一个简单的解决方案，但我还没有弄明白，有一千个类似的主题，但没有一个适合我，所以我用一种非常简单的方式问这个问题我有一个按钮，比如说按钮“a”，我想在点击这个按钮时加载外部页面的一部分加载该部分后，有另一个按钮（“B”）（在加载的内容中）使用jQuery显示一些隐藏的内容，问题是第二个按钮不起作用。我尝试使用.load（'content.html#1，script'）&设置超时代码如下：主页： <body> <a href="#" id="load">L

这似乎有一个简单的解决方案，但我还没有弄明白，有一千个类似的主题，但没有一个适合我，所以我用一种非常简单的方式问这个问题

我有一个按钮，比如说按钮“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>

而不是

 $("#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内容的函数？

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

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

$（“#显示”）。在（“单击”，“显示”，函数（）{
$（“#showhere”）.html（“在这里”）
});

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

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

$（“#holder”）。在（“单击”，“显示”，函数（）{
$（“#showhere”）.html（“在这里”）
});
});

原因是，在尝试连接处理程序时，元素不存在，因此没有任何东西连接

你也可以

使用

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>')
            });
       });
 });

我使用它来设置委托事件处理程序。您还可以使用可笑的重载（注意参数的顺序不同）：

…但我更喜欢对直接处理程序使用

on

，对委托处理程序使用

delegate

这样的清晰方式

在下面的评论中，你说

…问题是，我在加载的内容中有很多函数，有没有办法不重新编码就让它们工作

我猜你所说的“加载内容中的函数”是指

content.html

中有JavaScript可以处理其中的元素，并且你希望在这个文件中重用相同的脚本

这样做的方法是将该脚本放在自己的JavaScript文件中，让

content.html

和您的主页引用该文件。让脚本不在加载时执行，而是定义函数（如

contentPageHookUpNiftyEvents

）

content.html

可以在加载后立即调用该函数（如果您应该将

script

标记放在文件底部，则可以直接调用；如果您有理由不这样做，则可以通过

ready

调用）

您的主页将从上面#1中提到的

load

回调调用

contentPageHookUpNiftyEvents

。

您也可以使用动态绑定。将当前的“#show onclick”替换为此版本

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

$（“#显示”）.live（“单击”，函数（）{
$（“#showhere”）.html（“在这里”）
});

$（“#加载”）。单击（function（）{$（'#holder'）.html（'Loading'）。加载（'content.html#1'）；$（“#show”）。在（“单击”，function（）{$（'#showhere'）.html（'这里是

'））；}）；它不再工作了！，请注意，这只是一个示例，我会在加载的内容中使用很多jquery，很多渐变和幻灯片，我应该把它们放在哪里？@Ajinkya:请阅读文档。您需要代理版本的

.on（）

@Sonyflat:使用

.on（）

，无需更改任何其他内容。@Ajinkya我应该将.on（）放在哪里？@Sonyflat:检查我的更新答案。在中使用

。您希望将evnt绑定到动态添加的元素，即加载页面后添加的元素，如通过ajax添加的元素。您好，感谢您的回答，这非常有效，问题是我在加载的内容中有很多函数，有没有办法不重新编码就能让它们工作？@Sonyflat:你所说的加载内容中的“功能”是什么意思？我猜了一下你的意思，并在答案的末尾添加了一点，希望能有所帮助。好吧，看，在这个例子中，我们只是添加了一个.html元素，它是在点击按钮后加载的内容中，但我正在寻找一种方法来创建一个包含函数本身的更复杂的jquery（如过滤、滑块、显示/隐藏、幻灯片等）在加载区域工作，而不必重新编写整个代码。Thanks@Sonyflat：我们可能有重复的评论，请查看更新的答案，并让我知道这是否解决了问题。@Sonyflat:对不起，我不能比上面答案的结尾解释得更清楚，我还有一个截止日期需要处理。祝你好运，live当然不推荐使用。除此之外，这只是以前答案的重复。谢谢，但问题是，您不能简单地将所有事件更改为.on（“随便什么”）…特别是如果你有很多，而且还有更复杂的jquery东西，比如if和else，我真的不知道如何添加。除了它们，还有什么方法可以让jquery在每个加载的部分上工作呢？
$("#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>')
            });
       });
 });

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

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

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