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

0

Я попытался загрузить данные из внешнего 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, чей id является "rectangle_1", не является draggalbe и не изменяет размер

  • 1
    Пожалуйста, покажите нам свой код!
  • 0
    $ .ajax ({url: "test.html", async: false, dataType: "text", success: function (data) {console.log (data); $ (data) .appendTo ("# col_two"); вернуть true;}}); здесь col_two - идентификатор div
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

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

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

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

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

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

Поделиться
  • 0
    я не помещаю никакую функцию javascript в данные ajax, так как в вашем примере это объект ответа. Это просто чистый HTML-код
  • 0
    означает, что вы пытаетесь использовать jquery dragable после загрузки данных ajax правильно?
Показать ещё 3 комментария
1

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

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

Взгляните на load api в документации jquery, а также увидите разницу между $ ("# id"). Load и $.ajax? ссылку для сравнения.

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

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

Я тестировал это локально, и он работал...

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

Изображение 174551Изображение 174551

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

Поделиться
  • 0
    Я пытался использовать, содержимое отображается, но jquery не работает на них, как изменение размера и перетаскивание.
  • 0
    @ user1244566, добавьте код к вопросу - не в комментариях.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню