jQuery не работает с ajaxally загруженными данными

Question

Я попытался загрузить данные из внешнего html-файла в div.

Как я выбираю html-файл из раскрывающегося списка, а затем нажав кнопку загрузки, при нажатии он загрузит данные выбранного html-файла в текущий html, а на текущей странице html у меня есть div, в котором содержимое html скопировать.

Я могу легко получить содержимое внешнего html-файла в div на кнопку щелчка, но проблема в том, что содержимое, которое копируется из внешнего html в div, на этом html-содержимом jquery не работает должным образом, как draggable, resizable не работают.

Как устранить эту ошибку?

Мой код:

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

EDIT: Код от комментариев ниже ...

<div class="ui-draggable ui-resizable" style="background: none repeat scroll 0% 0% rgb(253, 23, 23); width:394px;height:210px;position:absolute; left:1084px; top: 287px;border:1px solid rgb(82, 1, 243); z-index:1;" id="rectangle_1"> 
    <div style="z-index:1;" class="ui-resizable-handle ui-resizable-e"></div> 
    <div style="z-index:1;" class="ui-resizable-handle ui-resizable-s"></div> 
    <div style="z-index:1;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> 
</div> 

Я пытаюсь добавить выше код в

Я добавляющим abovecode в Ajax вызова в col_two, добавленный div, чей идентификатор «rectangle_1» не является draggalbe и не изменяет размер

Answer 1

Я бы с uggest обрабатывает все, что связано с содержимым, загруженным ajax, в родительский файл. Учитывая, что вы не отправляли никакого кода, однако что-то вроде этого является то, что вы хотите сделать:

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

Если вы должны были поставить JavaScript в Ajax загруженного содержания, одна проблемы, я бы беспокоиться о том, что ваш ajax-загруженный скрипт может иметь зависимости, которые предположительно существуют в «родительском» файле.

Кроме того, ваш загруженный ajax код будет загружаться несколько раз, если вы повторно загрузите тот же контент более одного раза.

поэтому не загружайте скрипт с загруженным содержимым ajax, а скорее напишите любые функции в родительском файле javascript.

Answer 2

Вы можете не использовать функцию load для этого, как и в ...

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

Посмотрите на load api в документации Jquery, а также увидеть Difference between $("#id").load and $.ajax? ссылку для сравнения.

Для выдачи использования Draggable и т.д., вы ссылки JQuery.UI, а также у вас есть это в вашем коде ...

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

Я испытал это на месте, и он работал ...

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

Когда я запускаю это, я могу перетащить 'This is the loaded page...' вокруг.