0

我试图将外部 html 文件中的数据加载到 div 中。

就像我从下拉列表中选择 html 文件然后单击加载按钮一样，单击它会将所选 html 文件的数据加载到当前 html 中，并且在当前 html 页面中我有一个 div，其中要复制 html 内容。

我可以在按钮单击时轻松地将外部 html 文件的内容放入 div，但问题是从外部 html 复制到 div 的内容，在该 html 内容上 jquery 无法正常工作，如可拖动、可调整大小无法正常工作。

如何解决此错误？

我的代码：

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

编辑：来自下面评论的代码......

<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>

我正在尝试添加上面的代码

我在 ajax 调用中将上述代码附加到 col_two 中，附加 id 为“rectangle_1”的 div 不是 Draggalbe 也不是可调整大小的

4

2 回答 2

1

你能不能不使用这个load功能，如...

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

查看load apijquery 文档中的 ，另请参阅$("#id").load 和 $.ajax 之间的区别？链接进行比较。

对于使用 Draggable 等的问题，您是否在引用JQuery.UI并且您的代码中是否有这个...

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

我在本地对此进行了测试，它确实有效...

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

在此处输入图像描述 在此处输入图像描述

当我运行它时，我可以拖动'This is the loaded page...'。

于 2013-10-01T10:48:47.480 回答
0

我建议处理与父文件中的 ajax 加载内容相关的任何内容。鉴于您没有发布任何代码，但是您想要执行以下操作：

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

如果您要将您的 javascript 放在 ajax 加载的内容中，我会担心的一个问题是您的 ajax 加载脚本可能具有假定存在于“父”文件中的依赖项。

此外，如果您多次重新加载相同的内容，您的 ajax 加载代码将被多次加载。

所以不要用ajax加载的内容加载任何脚本，而是在父javascript文件中编写任何函数。

于 2013-10-01T10:44:44.560 回答