2013-07-12 10 views
14

Poniższy kod działa. Jeśli jest lepszy sposób, proszę daj mi znać. Jeśli używam skryptu zawartego w pliku test.html na stronie głównej, na której ładuję plik test.html poprzez ajax. Skrypt nie działa.Zdarzenia Jquery nie działają na załadowanej zawartości ajax

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      });    
     }); 
    </script> 
</html> 

test.html:

<h1 class='heading'>Page via AJAX</h1> 

    <script> 
     $(function(){ 
      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });       
     }); 
    </script> 

musimy załadować skrypt wraz z dynamicznie załadowanej treści poprzez AJAX pracować jak require.But wadą czułem że było za każdym razem wysłać zapytanie o skryptów ajax cały czas razem z zawartością. Ale znalazłem tylko to rozwiązanie. Jeśli ktoś zna lepsze rozwiązanie, proszę odpowiedzieć.

Na przykład po zmianie kodu w ten sposób nie będzie działać.

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      }); 

      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });         
     }); 
    </script> 
</html> 

test.html:

<h1 class='heading'>Page via AJAX</h1> 
+1

to dlatego, że jesteś owijając go w funkcji document.ready, która nie zostanie wywołana po AJAX wykończenia połączeń. możesz spróbować dodać swoje programy obsługi zdarzeń do funkcji zwrotnej sukcesu w wywołaniu load() lub użyć odroczonych wydarzeń globalnie zdefiniowanych na stronie głównej skryptu sekcji sekcji – Derek

+0

. Sprawdź ponownie moje pytanie. I proszę, proszę o odpowiedź z kodem –

+0

również upewnij się, że definiujesz swój tag skryptu z właściwymi atrybutami, np. '

0

Jedną z opcji jest, aby zainicjować skrypt na sukces obciążenia:

$('.test').on('click',function(){ 
    $('#ajaxload').load('test.html',function(){ 
     $('body').on('click', '.heading', function(){ 
      $(this).css('color','red'); 
     }); 
    }); 
}); 
Powiązane problemy