Exécution de code jQuery chargé dynamiquement

Je développe un site Web qui charge les pages dynamiquement à l'aide de la fonction .load. Par exemple: index.php contient un lien, qui charge une autre page après avoir été cliqué. Cette autre page contient du code html et du code jQuery (initialisation de plugins et etc). Le problème est que le code jQuery ne fonctionne pas après le chargement dynamique. Code index.php:Exécution de code jQuery chargé dynamiquement

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Example</title> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".load-page").click(function(){ 
      $('.loaded-page-container').load('some_page_url', function(data, status, xhr) { 
       alert('page is loaded'); 
      }); 
     });  
    }); 
</script> 

</head> 

<body> 

<a href="#" class="load-page">Load page</a> 

<div class="loaded-page-container"></div> 

</body> 
</html>

et le code de la page chargée:

<script type="text/javascript" src="autoNumeric-1.7.4.js"></script> 

<script type="text/javascript" src="selectmenu/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="selectmenu/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="selectmenu/ui/jquery.ui.position.js"></script> 
<script type="text/javascript" src="selectmenu/ui/jquery.ui.selectmenu.js"></script> 

<script type="text/javascript"> 
    $('#number').autoNumeric({mDec:0,vMax:'9999999'}); //these statements doesn't work 
    $('#select').selectmenu({ 
     width: 289 
    });  
</script> 

<div class="some-content"> 
    HTML code that appears after current page loading. 
    <input type="text" value="" name="number" id="number" /> 
    <select id="select"> 
     <option value="some-val">Some value</option> 
    </select> 
</div>

Ainsi la page se charge, mais plugins jQuery ne fonctionne malheureusement pas. Des idées?
Votre aide serait appréciée.

Source

2012-06-14 Bounce

Vous devez conserver tous les codes JS à la première page et non à la deuxième page.

Et une fois que l'appel AJAX est terminé & le remplissage est terminé, vous pouvez déclencher le javascript.

<!--ALL scripts linked in this page--> 
$.ajax({ 
    url: "some_page_url", 
    success: function(data) { 
     <!--LOADING ONLY THE HTMLs--> 
     $('.loaded-page-container').html(data); 
     alert('page is loaded'); 
    }, 
    complete: function(data) { 
     $('#number').autoNumeric({mDec:0,vMax:'9999999'}); 
     $('#select').selectmenu({ 
      width: 289 
     }); 
    } 
});

De même, vous devez vérifier si les plug-ins peuvent fonctionner ou non sur des fichiers html générés dynamiquement.

Source

2012-06-14 11:07:12

Vous pouvez utiliser jQuery.getScript() comme décrit ici:

jQuery.getScript reference @ api.jquery.com

Source

2012-06-14 11:08:14

Exécution de code jQuery chargé dynamiquement

Répondre

Questions connexes