javascript - 在 Ajax 选项卡中使用脚本加载文档

Question

我试图在新加载的 ajax 选项卡中调用一些脚本，但看起来选项卡内的脚本 block 根本没有被处理，所以当我去调用选项卡中的函数时找不到该函数。有没有办法正确加载选项卡内容以便解释脚本？

我试过使用 ajax 选项，但这似乎没有帮助。

$("#tabs").tabs({
            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html("This tab not yet built, sorry bub.");
                },
                dataType: 'html'

            },
            spinner: 'Loading tabs...',
        });

在标签中我有类似的东西

<script type="text/javascript">
   function SetupTab(){
     alert('loaded');
   }
</script>

但是

$("#tabs").bind("tabsshow", function(event, ui){ SetupTab();});

找不到设置选项卡。即使我允许加载该选项卡，然后尝试从 Firebug 调用 SetupTab，也找不到它。

Answer 1

如果您尝试将任何事件/操作绑定(bind)到尚不存在的 html 元素，即

$(document).ready(function(){
 //apply elemnt bindings here
});

当您确实使用 ajax 加载元素时，这些元素将不会采用您在文档就绪时提供的绑定(bind)，因为它们当时不存在。

将回调添加到您的 ajax 调用，然后将任何事件/函数绑定(bind)到您的新 html 元素，然后这应该可以工作。

我认为这就是您所指的。

编辑:试试这个。

$("#tabs").bind("tabsshow", function(event, ui){ alert('loaded');}); 

再次编辑:您可以试试这个。

确保您正在加载的页面只包含脚本本身而不是脚本标签，然后使用:

//lets say the data returned from your ajax call:
data = function SetupTab(){alert('loaded');}
eval(data);

然后你就可以毫无问题地调用那个函数了。

第三次编辑:如果您不能从您加载的页面中删除脚本标签，您可以对 html 进行正则表达式。用这种模式。

pattern = /<script\b[^>]*>(.*?)</script>/i
urscript = data.match(pattern);
eval(urscript[1]);

这应该有效。