jQuery ne fonctionne pas sur les données chargées ajaxally

J’ai essayé de charger des données d’un fichier HTML externe en div.

Comme si je sélectionnais un fichier html dans la liste déroulante, puis que je cliquais sur le bouton de chargement, un clic cliquera dessus pour charger les données du fichier html sélectionné dans le html actuel et dans la page html en cours, un div, dans lequel le contenu HTML doit être copié.

Je peux facilement obtenir le contenu d’un fichier HTML externe en div sur un clic de bouton, mais le problème est que le contenu copié d’un fichier HTML externe vers un div, sur ce contenu HTML, jquery ne fonctionne pas correctement, comme vous pouvez le faire glisser, redimensionnable, ne peut pas.

Comment puis-je résoudre cette erreur?

Mon code:

$.ajax({ url: "test.html", async: false, dataType: "text", success: function (data) { console.log(data); $(data).appendTo("#col_two"); return true; } }); 

EDIT: Code du commentaire ci-dessous …

 

J’essaie d’append le code ci-dessus dans

J’ajoute un code d’abovec dans un appel ajax dans col_two, le div ajouté dont l’id est “rectangle_1” n’est pas draggalbe ni redimensionnable

Je suggérerais de gérer tout ce qui concerne le contenu chargé en ajax dans le fichier parent. Étant donné que vous n’avez posté aucun code, vous souhaitez toutefois que quelque chose comme ceci:

 $.ajax({ url: "/file.php", success: function(response) { $('#div').html(respose); } }); 

Si vous deviez placer votre javascript dans le contenu chargé en ajax, un problème qui me préoccuperait est que votre script chargé en ajax pourrait avoir des dépendances supposées exister dans le fichier “parent”.

De plus, votre code ajax-chargé sera chargé plusieurs fois si vous rechargez ce même contenu plusieurs fois.

Par conséquent, ne chargez aucun script avec le contenu chargé en ajax, mais écrivez des fonctions dans le fichier javascript parent.

Ne pouvez-vous pas utiliser la fonction de load pour cela, comme dans …

 $( "#col_two" ).load("test.html"); 

Jetez un coup d’œil à l’ load api dans la documentation de jQuery et voyez également Différence entre $ (“# id”). Load et $ .ajax? lien pour une comparaison.

Pour la question de l’utilisation de Draggable, etc, faites-vous référence à JQuery.UI et avez-vous cela dans votre code …

 $(function() { $("#col_two").draggable(); }); 

J’ai testé cela localement, et ça a marché …

  $(document).ready(function () { $("#col_two").load("Page.htm"); $("#col_two").draggable(); }); 

entrez la description de l'image icientrez la description de l'image ici

Lorsque je lance ceci, je peux faire glisser 'This is the loaded page...' .