jQuery不能在AJAX加载的页面中工作

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.

我使用jQuery使用$通过AJAX加载页面。ajax(假设test.html)。它是一个简单的HTML文档，有一些按钮和相关的动画点击(也使用jQuery)。当我直接加载页面时，关联的.click()属性运行良好，但是当我在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>

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?

我希望我没有犯什么大错误?

3 个解决方案

#1

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.

.fn美元。活动，因为事件处理程序只在初始dom创建中注册，并且您正在重新填充dom，而这些都没有附加。

More info @ http://docs.jquery.com/Events/live

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

#2

If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.

如果我读的是正确的，你在开始时添加了点击处理程序。这些只影响当前按钮。您可能只需要将其更改为实时事件。

#3

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

on event work for current dom in your page and any dom loaded by ajax in the future

针对页面中的当前dom和将来由ajax加载的任何dom进行事件处理

#1