jQuery不工作在AJAX加载页面 [英] jQuery not working in AJAX Loaded page
本文介绍了jQuery不工作在AJAX加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jQuery使用$ .ajax（假设test.html）通过AJAX加载页面。
它是一个简单的HTML文档，有一些按钮和相关的动画，点击它们（也使用jQuery）。
当我直接加载页面时，相关的.click（）属性工作正常，但是当我在AJAX加载的版本中点击它们时，按钮无法响应。
由于我太轮胎实际上解释所有的glum我正在做，我只是写下面的所有代码，歉意为此。这是文件中必需的代码。
<！ - p11.php - >
<！DOCTYPE html>
< html>
< head>
< title> jQuery< / title>
< script type = text / javascriptsrc =c / js / jquery.js>< / script>
< script type =text / javascriptsrc =c / js / jtry11.js> < / script>
< link rel ='stylesheet'type ='text / css'href ='c / css / css11.css'>
< / head>
< body>
< button id =go1>使用AJAX加载内容< / button>
< div id =msg>< / div>
< ; div id =showButton>
< button id =showLoadedPage>显示页面< / button>
< / div>
< div id =results >< / div>
< / body>
< / html>
和下一个
$（document）.ready（function（）
{
$（'＃results'）。hide（）;
$（'＃msg'）。hide（）;
$（'＃showButton'）。 （'#loading'）。hide（）;
$（'＃loaded'）。hide（）;
$ （）
{
$（'＃load'）。hide（）;
$（'＃loading'）。show（）;
$（'＃msg'）。show（'fast'）;
$ .ajax（{
url：'test.html'，
cache：false，
success：function（html）{
$（' ）.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 b $（'＃loaded'）。show（）;
}）;
}）;
$（'＃showLoadedPage'）。live（'click'，function（）{
$（'＃loaded'）。hide（'slow'）;
$ （'#msg'）。hide（'slow'）;
$（'＃results'）。show（'fast'）;
$（'。shower'）。hide b $ b $（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'）。 （'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 - >
Ajax加载的页面。
不是原来的页面
< center>
< button class =hider>
< img src =c / images / zoom_out.pngalt =zoom_out/>
隐藏'em
< / button>
< button class =shower>
< img src =c / images / zoom_in.pngalt =zoom_out/>
显示
< / button>
< p class =one> Hiya< / p>
< p class =two>这样有趣的文字，eh？< / p>
< p class =three>第三段< / p>
< / center>
我希望我不会犯大错误？
$（'＃go1'） .live（'click'，function（）{}）;
$。fn.live，因为事件处理程序只在初始dom创建时注册，重新填充DOM和那些没有附加。
更多信息@ http：// docs。 jquery.com/Events/live
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).
Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).
The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.
Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- 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>
and the next
$(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();
}
});
});
and the last
<!-- 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>
I hope I am not making some big time mistake?
解决方案
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info @ http://docs.jquery.com/Events/live
这篇关于jQuery不工作在AJAX加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
