Eventi JQuery non funzionanti su contenuto caricato con Ajax

Il codice seguente funziona. Se c'è un modo migliore per favore fammi sapere. Se uso il contenuto dello script che è presente in test.html nella pagina principale in cui sto caricando test.html tramite ajax. Lo script non funziona.Eventi JQuery non funzionanti su contenuto caricato con 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>

dobbiamo caricare lo script insieme a contenuto caricato dinamicamente tramite ajax per lavorare come si require.But svantaggio ho sentito è stato ogni volta che ci invia richiesta Ajax carichi di script tutto il tempo insieme al contenuto. Ma ho trovato solo questa soluzione. Se qualcuno conosce una soluzione migliore, risponda.

Ad esempio, se si modifica il codice in questo modo, non funzionerà.

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

fonte

2013-07-12 Susheel Singh

è perché si sta avvolgendolo nella funzione document.ready, che non si chiamerà dopo una chiamata AJAX finiture. puoi provare ad aggiungere i tuoi gestori di eventi in una funzione di callback di successo nella tua chiamata a load() o utilizzare gli eventi posticipati globalmente definiti nella sezione di script della tua pagina principale – Derek

per favore ricontrolla la mia domanda. E per favore, per favore, rispondi con un codice –

assicurati anche di definire il tuo tag script con gli attributi appropriati, ad esempio '

Una possibilità è quella di inizializzare lo script in caso di successo di carico:

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

fonte

2014-04-22 19:17:47

Problemi correlati