jQuery AJAX Loaded sayfasında çalışmıyor

3 Cevap php

Ben $ kullanarak AJAX ile bir sayfayı yüklemek için jQuery kullanıyorum. Ajax (varsayalım test.html).
(Ayrıca jQuery kullanarak) onları tıklayarak üzerine birkaç düğme ve ilişkili animasyonlar ile Onun basit bir HTML belgesi.
Ben doğrudan sayfasını yüklediğinizde ilişkilidir. click () özellikleri iyi çalışıyor ama düğmeleri ben AJAX yüklenen sürümü bunları tıkladığınızda yanıt başarısız. ben de lastikler olduğum aslında ben tüm keyifsiz açıklamak
yapıyor, ben sadece bunun için, aşağıda özür dilemek tüm kod yazıyorum. Burada dosyalarda istenen kodlardır.

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

ve bir sonraki

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

ve son

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

Ben bazı büyük zaman hata yapma değilim umarım?

3 Cevap

İhtiyacınız gibi geliyor

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

$. Fn.live, olay işleyicileri yalnızca ilk dom yaratılış üzerinde kayıtlı olan ve DOM ve bu repopulating konum olarak bağlı değildir.

Daha detaylı bilgi @ http://docs.jquery.com/Events/live

Ben bu doğru okuyorum eğer başında tıklama işleyicileri ekliyoruz. Bunlar sadece geçerli düğmeleri etkilemez. Sadece bir canlı olaya değiştirmek gerekebilir.

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

olay cari sayfanızda dom ve gelecekte ajax tarafından yüklenen herhangi bir dom için çalışmak

etiketler