Question

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

我尝试过使用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();});

找不到SetupTab。即使我允许加载选项卡然后尝试从firebug调用SetupTab也无法找到它。

Answer 1

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

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

当您使用ajax加载元素时，元素将不会采用您在文档就绪时提供的绑定，因为它们在此时不存在。

添加一个回调给你的ajax调用然后将任何事件/函数绑定到你的新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);

然后你可以调用那个函数没问题。

编辑第3次使用时间：如果您无法从页面中删除脚本标记，则可以使用html重新编写。用这种模式。

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

这应该有效。

Answer 2

你可以做的也是从元素中分离你的ajax调用（例如只需$ .getScript）。
您的加载选项卡功能应该是这样的：

<div class="tabs" onclick="$.getScript('myScript.php?index='+$(this).index(#tabs"))">...

然后服务器端脚本应返回如下内容：

echo '
$("#tabs").eq('.$_GET['index'].')html("'.$myHTML.'");
/* Then the rest of your JS script (what you had in your HTML output) */
';

使用Ajax选项卡中的脚本加载文档

2 个答案: