Kendo Tabstrip: Call tab content's javascript function whenever a tab is selected

Question

我有一个 kendo 标签条，有多个标签内容，每个标签都包含 Javascript 功能 $(document).ready()...

但是，它只在选项卡第一次被 selected（内容加载）时执行，当我 select 另一个选项卡并返回到这个选项卡时，因为内容是已加载，$(document).ready() 未被调用。

是否有任何可能的方法使 $(document).ready() 在每次 selected 标签时执行？（出于性能考虑，不能每次都重新呈现选项卡内容...）

如有任何建议，我们将不胜感激！

Answer 1

您可以为每个单独的选项卡定义一个函数，并连接一个客户端事件以在使用 some of the available events 更改 TabStrip 选择时获取：

@Html.Kendo().TabStrip()
            .Name("YourTabStrip")
            .Events(events => events.Select("tabChanged"))

<script>
    function tabChanged(e){
        // Get your selected tab using (e.item);
        var index = $("#YourTabStrip").data("kendoTabStrip").select().index();

        // Based on the tab, trigger a function
        switch(index){
            default:
            case 0:
                LoadContentA();
            case 1:
                LoadContentB();
        }
    }
</script>

并且您可以在各个选项卡中重构每个 $(document).ready() 调用，以简单地调用 switch 语句中指定的函数之一：

<script>
    $(document).ready(function(){
        LoadContentA();
    });

    function LoadContentA(){
        // Do work here
    }
</script>

我敢肯定，如果您通读 available Javascript API documentation and ASP.NET MVC API documentation，它可能有助于提供一些额外的见解，以更好地解决这个问题。

Kendo Tabstrip: Call tab content's javascript function whenever a tab is selected

Kendo Tabstrip: Call tab content's javascript function whenever a tab is selected

c#

asp.net-mvc-4

kendo-asp.net-mvc