jQuery Girl
  1. jQuery Girl
  3. Material Design Lite JS non appliqué au fichier HTML chargé de manière dynamic
Intereting Posts
balises html à l’intérieur des balises xml – comment accéder à javascript? Que signifie un espace dans un sélecteur jQuery? Existe-t-il une raison d’utiliser le sélecteur ‘* .class’ sur ‘.class’? jqgrid – développe tout / réduit tout en regroupant setTimeout sur une fonction asynchrone Requête interdomaine lorsque le serveur NE prend PAS en charge JSONP Télécharger un fichier + Données du formulaire + Spring MVC + JQuery Différences entre les méthodes jQuery: .select () et .focus () HighCharts: exploration d’une colonne empilée Vous souhaitez utiliser les effets de fondu entrant jQuery, mais vous souhaitez utiliser la visibilité: masquée initialement Highchart: distance exacte entre les ticks Pour voir le contenu des données POST transférées par jQuery jQuery – Utilisez la barre de défilement de la fenêtre pour faire défiler le contenu d’une DIV formData.has () n’est pas une fonction Fermeture JavaScript pour le gestionnaire d’événements jQuery

Material Design Lite JS non appliqué au fichier HTML chargé de manière dynamic

Je souhaite unifier la disposition de navigation de mon site Web. J’ai donc créé un fichier HTML distinct contenant le code de la navigation. J’utilise un JS pour charger le fichier dynamicment: 

$("#navigation").load("/navigation/navigation.html", function() { $.getScript('/material.min.js'); });

Le problème est que material.min.js n’est pas exécuté pour les composants chargés dynamicment à l’intérieur de ce code HTML et que je perds certaines fonctionnalités cruciales. Comment puis-je résoudre ce problème?

Vérifiez si le componentHandler est chargé et essayez de mettre à niveau les éléments après le chargement. 

 if(!(typeof(componentHandler) == 'undefined')){ componentHandler.upgradeAllRegistered(); }

Comment fonctionne le gestionnaire de composants

En bref, cela concerne tous les composants enregistrés. Requêtes pour tous les nœuds avec la classe CSS fournie. Boucle sur ceux-ci et les instancie un par un. Lorsque la mise à niveau est effectuée sur un nœud, l’object mis à niveau est ajouté à l’dataset. Cet object contient une liste de propriétés classAsSsortingng du composant, séparées par des classAsSsortingng , permettant d’identifier les mises à niveau effectuées.

De la documentation officielle:

Material Design Lite enregistre et rend automatiquement tous les éléments marqués avec les classes MDL lors du chargement de la page. Toutefois, dans le cas où vous créez des éléments DOM de manière dynamic, vous devez enregistrer de nouveaux éléments à l’aide de la fonction upgradeElement .

Donc, charger à nouveau le script material.js ne l’exécutera pas. Mais vous pouvez faire quelques expériences avec upgradeElements en l’appliquant à l’ensemble du balisage chargé ou à des éléments particuliers.