jQuery不工作在AJAX加载页面
问题描述:
我正在使用jQuery使用$ .ajax(假设test.html)通过AJAX加载页面。
它是一个简单的HTML文档,点击它们时也有几个按钮和相关的动画(也使用jQuery)。
当我直接加载页面时,与.click()属性相关的工作正常,但当我在AJAX加载版本中单击它们时,按钮无法响应。
由于我实在太无法解释我所做的一切,所以我只是写下所有的代码,对此表示歉意。以下是文件中所需的代码。jQuery不工作在AJAX加载页面
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
和下
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if($('p').is(':hidden')) {
$('.shower').show();
}
if($('p.*').is(':hidden')) {
$('.hider').show();
}
});
});
最后
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
我希望我没有做一些大的时候的错误?
答
听起来像是你需要
$('#go1').live('click', function() {});
$ .fn.live,作为事件处理程序只在初始DOM创建注册,和你重新填充DOM以及那些没有连接。
答
如果我读这个权利,你在开始处添加点击处理程序。这些仅影响当前按钮。您可能需要将其更改为Live活动。
答
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
对在当前页面的DOM和DOM任何AJAX通过在未来
仍然没有工作:( – OrangeRind 2009-09-14 02:30:52
你可以用更新的代码更新的说明,或粘贴一个活链接加载事件的工作?你确实记得要替换所有* .click事件句柄赋值,它们需要重新应用$('selector')。live('click',function(){});? – 2009-09-14 02:35:48
Yes it Works now!Thanks!In我第一次只是在go按钮中替换它,但是现在我完成了它。.click和.live()之间的区别究竟是什么?这是否意味着我可以使用.live来代替点击? – OrangeRind 2009-09-14 08:26:46