带有脚本标签的 jquery 选项卡中的动态内容

Question

我正在尝试在四个 jquery 选项卡中的每一个中加载动态内容。每当用户单击选项卡时，我都会请求一个 jquery ajax 调用来获取该单击选项卡的内容。内容是一组带有一些脚本标签的手风琴。当我在 chrome 中执行 console.log 时，我可以看到所有的脚本标签。但是一旦我像这样将内容分配给标签内容

首先我像下面这样绑定标签

$(".tabs").tabs({
              activate: function (event, ui) {
                  var active = $('.tabs').tabs('option', 'active');
                  console.log(active);
                  $(".tabs-" + active).html('test content');

                  var tab_text = $(".tabs ul>li a").eq(active).html();
                  var GroupCode;
                  if (tab_text == "Excel 2003")
                      GroupCode = "2003";
                  else if (tab_text == "Excel 2007")
                      GroupCode = "2007";
                  else if (tab_text == "Excel 2010")
                      GroupCode = "2010";
                  else if (tab_text == "Excel 2013")
                      GroupCode = "2013";


                  var tab_content;
                  tab_content = GetMyData(GroupCode);
                  //console.log(tab_content);
                  $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);

              }
          });

当特定选项卡被激活时，我调用了一个方法来通过 jquery ajax GetMyData(GroupCode) 获取内容

function GetMyData(groupCode) {
         groupCode = groupCode.replace("CGRO","");
          var _optionList;              

          $.ajax({
              type: "POST",
              url: "getcontent.aspx?cg=" + groupCode,
              data: {},
              async: false,
              dataType: "html",
              success: function (response) {

                  _optionList = response;
                  $(".accordion").accordion();
              },
              failure: function (response) {
                  alert(response.d);
              },
              error: function (jq, status, message) {
                  alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message);
              }
          });

         // console.log(_optionList);
          return _optionList;
      }

这就是我将内容传递给活动标签的那一行

 $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);

tab_content 的所有内容都包括脚本选项卡，但在将其传递给 .html 后，我看不到 tab_content 中的任何脚本标记。

我用谷歌搜索了几天，可以看到一个选项是 innerHTML，但在我的情况下，它不适用于选项卡。我也尝试了.text，但它没有呈现html，而是以纯文本形式吐出内容。

如何从 ajax 调用中加载包含脚本标签的内容。

注意：我正在使用 asp.net(VB) 加载具有 html 和 javascript 的内容。 提前谢谢你。

Answer 1

尝试使用 jquery $.parseHTML() ，转义关闭 script 标签，即 <\/script>

$(function() {
var str = "<script type=text/javascript>alert(123)<\/script>"
             + "<span>abc</span>";
var script = $.parseHTML(str, document, true);
    $("body").append($("<div>"));
    $("div").html(script);
});

jsfiddle http://jsfiddle.net/guest271314/uH42S/

Answer 2

问题在于函数 GetMyData 进行了 AJAX（异步 JavaScript 和 XML）调用。

tab_content = GetMyData(GroupCode); // <-- hidden AJAX call
//console.log(tab_content); // <-- will always be undefined
$('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content); // <-- appends undefined

tab_content 始终未定义的原因是对GetMyData 的调用安排了AJAX 调用，然后继续执行activate 函数。由于尚未调用 AJAX 调用，它无法返回 _optionList，因此 tab_content 变量仍未定义。

activate 函数完成执行后，将进行 AJAX 调用并最终返回 _optionList，但由于 activate 函数已完成执行，return 毫无意义（并被忽略）。

解决方案是在 AJAX 调用完成时传递对您的容器的引用，或将填充容器的回调：

function GetMyData(groupCode, container) { // passing reference to container
    $.ajax({
        // ... other options ....
        "success": function (response) {
            container.html(response);
            // _optionList = response; // <-- not needed unless you want to store the response somewhere, like in a data attribute.
            $(".accordion").accordion();
        },
        // ... other options ....
    });
}

// call like this

GetMyData(GroupCode, $('.ui-tabs-panel').not('.ui-tabs-hide'));

另一种选择是：

function GetMyData(groupCode, callback) { // passing callback
    $.ajax({
        // ... other options ....
        "success": function (response) {
            callback(response);
        },
        // ... other options ....
    });
}

// call like this

GetMyData(GroupCode, function (tab_content) {
    $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);
    $(".accordion").accordion();
});

编辑

我刚刚看到您将async 设置为false 的位置，这几乎使我的答案无效。请按照下面的代码帮助我们帮助您调试。

function GetMyData(groupCode) {
    var _optionList;
    groupCode = groupCode.replace('CGRO', '');
    $.ajax({
        "type": "POST",
        "url": "getcontent.aspx?cg=" + groupCode,
        "data": {},
        "async": false,
        "dataType": "html",
        "success": function (response) {
            console.log(response); // <-- Add this line exactly here and post the log in your question.
            _optionList = response;
            $('.accordion').accordion();
        },
        "failure": function (response) {
            alert(response.d);
        },
        "error": function (jq, status, message) {
            alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message);
        }
    });
    // console.log(_optionList);
    return _optionList;
}