JavaScript ne sera pas exécuté une seconde fois

Question

Je cours un script en utilisant $(document).ready() il fonctionne comme je le veux au chargement, cependant, le même script doit être exécuté quand un contrôle de sélection html est changé. Ce dont j'ai besoin, en fin de compte, c'est que le filtre fonctionne avec la charge initiale et qu'il soit trié de bas en haut. Après le chargement de la page, l'utilisateur devrait pouvoir sélectionner n'importe quel contrôle et trier comme bon lui semble. .

Rendez-vous au http://webtest.ipam.ucla.edu pour afficher le code et en bas de la page, vous pouvez télécharger le dossier contenant tous les fichiers.

Comment résoudre ce problème?

Answer 1

Merci à tous pour votre aide, ceci est maintenant corrigé. La façon dont je l'ai fait était d'encapsuler le $ (function() {}) dans une autre fonction (filtersortProcess()) et ensuite créé un autre script qui sélectionne automatiquement l'option Low to High et appelle filtersortProcess() sur windows.load.

Dans le $ (function() {}) j'ai ajouté une variable (complète) et la mettre à 1 quand elle va dans le processus de filtrage, puis après le processus de filtrage (si le code se termine avant de terminer le processus) Je vérifie la variable complète et fais un simple filtre et tri sur les données et avec tout ça cela fonctionne très bien.

Encore merci.

Answer 2

Vous pouvez mettre toute votre logique réutilisable en fonction:

function myPrettyJavaScriptLogic() { 
    // All the code that you want to reuse in here 
} 

Ensuite, vous pouvez appeler la fonction ci-dessus à la fois de document.ready() et aussi du gestionnaire onchange de votre commande de sélection.

Answer 3

Mettez votre script dans une fonction nommée. appelez-le dans domready et select.change().

Answer 4

Créez une fonction en dehors de votre fermeture doc ready et appelez-la quand vous en avez besoin. L'exemple est jQuery mais doc prêt est le même événement:

var doSomethingCool = function(coolStuff) { 
    // Do cool stuff 
} 

$(function(){ 
    doSomethingCool($(this)); 

    $('#selectControlId').change(function(e){ 
    doSomethingCool(); 
    }); 

}); 

Answer 5

Vous aurez besoin de mettre en place un gestionnaire pour l'événement onChange de la boîte select. Ce que je voudrais faire est de retirer le code que vous devez exécuter dans une fonction séparée, puis faire quelque chose comme

function dostuff(){ 
//do whatever you need to 
} 

$(document).ready(function() { 
    dostuff(); 
} 

<select onchange"dostuff()" >... </select> 

RemarqueCet était rapide et sale, juste pour vous donner une idée.

Consultez this link pour plus d'informations sur selectonchange.

Answer 6

Étant donné que vous faites référence à la fonction .ready, je suppose que vous utilisez réellement jQuery.

$ (document) .ready() ou jQuery (document) .ready()

Tout prêt dans la fonction() ne sera appelée une fois - lorsque la page est chargée. Il attend jusqu'à ce que le DOM entier soit chargé avant d'exécuter ce code.

Vous pouvez extraire votre fonctionnalité vers une fonction distincte pour être déclenchée en fonction de votre changement de contrôle de sélection.

Vous pouvez profiter de la lecture d'un tutoriel jQuery je l'ai écrit la semaine dernière: http://chadcarter.net/jquery-goodness/

En outre, l'événement .Modification réelle dans l'API jQuery est ici: http://api.jquery.com/change/

En supposant que vous voulez que la fonctionnalité être appelé lorsque la page se charge et lorsque l'option est modifiée, vous voulez créer une nouvelle fonction et avoir cette fonction appelée à l'intérieur des fonctions .ready et .change.

Espérons que cela aide!

Answer 7

Si vous utilisez jQuery, ce que je suppose que vous êtes à cause de cette syntaxe, il suffit de lier l'événement onchange à l'élément.

$("element").bind("change", function() { /* your logic */ }); 

Vous devez exécuter ce code après le rendu de l'élément. Si vous placez ce code à l'intérieur du $(document).ready, il n'y aura pas de problème. mais toute la page devra charger avant que le pair soit lié.

Vous pouvez donc effectuer les opérations suivantes:

<select id="sel"> 
    <option>A</option> 
    <option>B</option> 
</select> 

lient alors l'événement change.

$(function() { /* equivalent to document.ready */ 
    $("#sel").bind("change", function() { 
     /* code that runs when the selection change */ 
    }); 
});