javascript - 使用ajax加载jquery htmlbox

Question

我使用此代码将 htmlbox 实例加载到我的页面(此页面还加载在 head 部分使用 htmlbox 所需的库):

<div id="container"></div>

<script language="Javascript" type="text/javascript">

 function showEditPnl() {
  var pnl = document.getElementById("container");

  if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
  } else {
   // code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    pnl.innerHTML = xmlhttp.responseText;
   }
  };
  xmlhttp.open("GET","ajax_getEditor.html",true);
  xmlhttp.send();
 }
</script>

这是 ajax_getEditor.html 文件:

<textarea id='ha'></textarea>
<script language="Javascript" type="text/javascript">
$("#ha").css("height","100%").css("width","100%").htmlbox({
    toolbars:[["link","unlink","image"]],
 skin:"blue"
});
</script>

当我调用 showEditPnl() 方法时，我会看到页面中的文本区域和脚本。但似乎脚本(通过ajax加载)没有执行。当我从 ajax_getEditor.html 复制代码并将其放入容器中时，一切正常。我确信这是一个非常基本的问题，但我不知道如何解决它..

Answer 1

正如评论所述，这是像您当前一样使用 .innerHTML 的结果，这个答案与问题有点无关。

您可以使用.load()在这里，因为您已经包含了 jQuery 来稍微简化事情。您可以将当前的函数替换为:

function showEditPnl() {
  $("#container").load("ajax_getEditor.html");
}

或者，您可以在回调中运行脚本，而不是从获取的页面加载脚本，如下所示:

function showEditPnl() {
  $("#container").load("ajax_getEditor.html", function() {
    $("#ha").css({height:"100%", width: "100%"}).htmlbox({
      toolbars:[["link","unlink","image"]],
      skin:"blue"
    });
  });
}

在本例中，我还将一个对象传递给 .css()将其减少为一次调用而不是两次。