Question

194

jQuery not working in AJAX Loaded page

rated 0 times [ 196] [ 2] / answers: 1 / hits: 19653 / 15 Years ago, mon, september 14, 2009, 12:00:00

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>