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>

我希望我没有做一些大的时候的错误？

来源

2009-09-14 OrangeRind

听起来像是你需要

$('#go1').live('click', function() {});

$ .fn.live，作为事件处理程序只在初始DOM创建注册，和你重新填充DOM以及那些没有连接。

更多信息@http://docs.jquery.com/Events/live

来源

2009-09-14 02:23:31

仍然没有工作:( – 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

如果我读这个权利，你在开始处添加点击处理程序。这些仅影响当前按钮。您可能需要将其更改为Live活动。

来源

2009-09-14 02:24:03

$("#peopleResult_list").on('click','a', function(event){ 
    //do you code here 
});

对在当前页面的DOM和DOM任何AJAX通过在未来

来源

2012-08-31 09:10:14

jQuery不工作在AJAX加载页面

回答

相关问题