jQuery Girl
  1. jQuery Girl
  3. Le script JavaScript ajouté dynamicment continue de s’exécuter lorsqu’il est supprimé du DOM
Intereting Posts
Comment puis-je empêcher la validation automatique de jQuery validate? Comment obtenir le premier paragraphe analysé de wikipedia? Redimensionner proportionnellement l’image en fonction de la taille de la division parent Pourquoi mon site alerte-t-il «xssvuln» lorsque j’utilise jqueryui autocomplete? Utilisez Javascript pour parsingr un répertoire local, puis mettez à jour une balise Anchor avec le fichier “latest”. jquery javascript équivalent pour element.function comme $ (“div”). toggle () Comment utiliser $ .post avec Django? Ajout de deux listes à sélectionner, la première doit être sélectionnée par défaut clone google map instance définir la vitesse d’animation par défaut de jquery jQuery: recherche d’un nom de classe partiel Le rendu Jqplot DateAxis n’est pas correct jQuery Masonry et Ajax Ajouter des éléments? IE 11 se plantant comme par magie lors de l’animation avec velocity.js et svg Comment charger l’image d’arrière-plan à partir d’une autre page?

Le script JavaScript ajouté dynamicment continue de s’exécuter lorsqu’il est supprimé du DOM

Je crée donc un SPA et j’utilise AJAX pour charger des pages HTML dans la page d’index de mon site. Le problème est que, lorsqu’une de mes pages est incluse, elle semble traîner et exécuter le code JavaScript qu’elle contient même si elle est ensuite supprimée du DOM.

index.html (corps)

tutorial.html 

 
 
 
 
 
 
 
 
+
 
−
 
×
 
÷
 
=
 
 
 
 
    

Les deux scripts chargés dynamicment à partir de tutorial.html semblent toujours s’exécuter même lorsque le contenu de #ui_container est vidé et remplacé par un nouveau contenu. Voici comment je charge les pages HTML: 

 function to (page_name, callback) { $.ajax({ url: page_name + '.html', type: 'GET', cache: false, async: true, beforeSend: function () { }, success: function (page) { $('#ui_container').html(page); return is_function(callback) ? callback(page) : true; }, error: function (jqXHR, text_status, error_thrown) { console.log(text_status); } }); }

Exemple

Ce GIF devrait expliquer ce que je veux dire:

Lorsque je clique sur le bouton du tutoriel, il charge le contenu du fichier posté ci-dessus et le place #ui_container . Tout fonctionne correctement.

Le problème est que lorsque je retourne ensuite au menu principal, il affiche encore cette fenêtre contextuelle pour une raison quelconque, même si le contenu du DOM a été supprimé.

J’ai ensuite examiné l’onglet Réseau et découvert que tutorial.html (et les scripts qu’il contient) était appelé à nouveau, même lorsque vous reveniez au menu. L’image ci-dessous décrit ce qui a été mentionné:

Pourquoi cela arrive-t-il?

Mise à jour # 1 

 $(document).on('click', '.clickable', function () { if (self.hasClass('back_to_home') || self.hasClass('ui_go_back_to_home')) return to('home'); }

Mise à jour # 2 

 $(document).on('click', '.ui_operator_choice', function () { }); $(document).on('click', '#ui_restart', function () { });