0

例如，我有以下名为的 HTML index.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>

还有一个简单的 JS 文件，名为action.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 的 div subcontent，但是.hide按钮不起作用。

其次，在我尝试插入之后

脚本类型="文本/javascript" src="action.js"

在里面test.html，隐藏按钮起作用并淡出它的内容。但反过来，我发现按钮loadSub不再起作用。我无法subcontent再次加载。

有没有其他方法可以只声明一次 js 文件的源并button.loadSub在我单击它时进行工作？任何人都可以解释这个问题并给我一个解决它的提示。

4

3 回答 3

2

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

您可能想尝试做一个delegate附件。

$('#sub').on('click', 'button.hide', function () {
    $('#sub').fadeOut('slow');
});
于 2012-05-17T13:31:08.427 回答
1

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

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

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

如果是旧版本，则委托：

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

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

于 2012-05-17T13:31:41.823 回答
1

在第一页，把这个。您可以将我的 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>
于 2012-05-17T13:39:51.683 回答