jQuery funktioniert nicht in AJAX geladenen Seite

StackOverflow https://stackoverflow.com/questions/1419433

Frage

ich jQuery bin mit einer Seite von AJAX laden $ Schnipseln (suppose test.html) verwendet wird.
Sein ein einfaches HTML-Dokument mit wenigen Tasten und die zugehörigen Animationen auf sie klicken (auch jQuery verwenden).
die .click () Eigenschaften zugeordnet sind, arbeiten gut, wenn ich die Seite direkt laden, aber die Tasten nicht reagieren, wenn ich sie in der Version AJAX geladen klicken.
Da ich Reifen bin auch auf alle bedrückt eigentlich zu erklären, dass ich bin tun, ich schreibe einfach den gesamten Code unten, Entschuldigungen dafür. Hier sind die erforderlichen Codes in den Dateien. 

<!-- 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>

und die nächste 

$(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();
        }
    });
});

und die letzten 

<!-- 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>

Ich hoffe, ich bin nicht einige große Zeit Fehler zu machen?

War es hilfreich?

Lösung

Klingt wie Sie benötigen 

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

$. Fn.live, als Event-Handler nur bei der erstmaligen dom Schaffung registriert sind, und Sie den DOM sind repopulating und die sind nicht angebracht.

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

Andere Tipps

Wenn ich dieses Recht Lesen Sie hinzufügen, die Klick-Handler am Anfang. Diese nur aktuelle Tasten beeinflussen. Sie können nur das zu einem Live-Ereignisse ändern müssen. 

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

auf Ereignis Arbeit für aktuellen dom auf Ihrer Seite und jeden dom geladen von Ajax in Zukunft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top