Question

例如，我有以下名为index.html的HTML：

<html>
<head>
    <style>
        #content { float:left; }
        #sub { float:right; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="action.js"></script>    
</head>
<body>
    <h2>Test de</h2>
    <div id="content">
        Content
        <button class="loadSub">Load</button>
    </div>
    <div id="sub">
        Sub content
    </div>
</body>
</html>

一个名为action.js的简单JS文件：

$(document).ready(function(){
    $('button.loadSub').click(function(){
        $('#sub').load('test.html');
    });

    $('button.hide').click(function(){
        $('#sub').fadeOut('slow');
    });
});

正如您所看到的，当我点击按钮.loadSub时，div #sub将加载来自test.html的新内容：

<h2>This is the sub content</h2>
<button class="hide">Hide</button>

我在这里遇到两个问题：

首先，.loadSub按钮成功加载了ID为subcontent的div，但.hide按钮无效。

其次，在我尝试插入

之后

script type =“text / javascript”src =“action.js”

在test.html内，隐藏按钮工作并淡出其内容。但接着，我发现按钮loadSub不再起作用。我无法再次加载subcontent。

有没有其他方法可以宣布js文件的来源，并在我点击它时使button.loadSub工作？有人可以解释一下这个问题并给我一个解决方法。

Answer 1

您正在将动态HTML加载到您的网页中。这意味着，在您调用$('button.hide').click()时，您的网页中尚未显示button.hide元素，因此无法附加click处理程序。

您可能希望尝试使用delegate附件。

$('#sub').on('click', 'button.hide', function () {
    $('#sub').fadeOut('slow');
});

Answer 2

当您尝试绑定事件时，隐藏按钮不在页面上，因此永远不会注册。

将其更改为使用此on（假设版本为1.7 +）

$(document).on('click', 'button.hide', function(){
    $('#sub').fadeOut('slow');
});

或委托旧版本：

$(document).delegate('button.hide', 'click', function(){
    $('#sub').fadeOut('slow');
});

这会在文档级别附加事件处理程序，因此可以用于添加到页面的任何新内容。

Answer 3

在第一页上，放上这个。您可以将我的JQQuery代码插入到action.js文件中。在第二页，你加载到div中的那个，放入我添加的第二个Jquery代码。

在第一页：

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<style>
#content{float:left;}
#sub{float:right;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>

</head>

<body>

<h2>Test de</h2>

<div id="content">
Content
<button class="loadSub">Load</button>
</div>

<div id="sub">Sub content</div>

</body>

</html>

在第二页（加载到div中的页面，添加：

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>

<h2>This is the sub content</h2>
<button class="hide">Hide</button>

将内容加载到div后，jQuery停止工作

3 个答案: