Bootstrap选项卡和jQuery事件触发问题

Question

因为我是新手JavaScript和jQuery所以我面临着问题 简单的事情。

我创建了3个引导标签。(i.e. mainstream,substream,delayedstream)， 在所有标签中，我使用vlc players创建了jQuery，玩家可以使用 我没有遇到任何问题。

当触发标签更改事件时（即切换到另一个tab时）我正在调用jQuery function。这有责任创建我的vlc player。

以下是我编写的用于检测tab change event和trigger相应函数的代码： -

$("a[data-toggle='tab']").on('shown.bs.tab', function(e){ 
    var target = $(e.target).attr('href');
    if(target=="#att_mainstream")
    {
        mainvideoObject.mainshow();
    }   
    if(target=="#att_substream")
    {
        subvideoObject.subshow();
    }
    if(target=="#att_delayedstream")
    {
        delayedvideoObject.delayedshow();
    }
});

每当我们切换tabs时，都会调用特定的tab function。

这是真正的问题，每当我切换tabs时，vlcplayer的创建都会增加到该特定标签。

（简要说明我首次执行时的问题，在first tab默认情况下，只创建了一个player，当我访问second或third { {1}}然后再次返回tab并在first tab中再创建一个player，并且每次连续访问该first tab时都会继续增加tab这同样适用于second和third tab，它会在每次访问时不断增加一个player

我对这个问题的看法是，可能是在调用function for every tab change event并导致额外创建player。

所以这里是完整代码的JSFiddle。

P.S。 code和输出看起来非常笨拙，因为它紧密地形成。但我们可以在浏览器的Inspect Element选项中观察到问题，即每个tab change如何为该特定tab创建一个额外的播放器。

以下是一些可以更好地理解问题的快照。

1）这是我第一次执行它时（只创建一个玩家）

2）访问其他标签后，second或third tab，然后再次返回第一个标签。

我没有得到真正的问题是什么？

任何对我感激的帮助。

提前致谢。

Answer 1

修改：

我之前的建议是在底部。但是一个更好的方法可能是在调用xxxvideoObject.xxxshow（）之前检查它是否已经存在：

    $("a[data-toggle='tab']").on('shown.bs.tab', function(e){ 
        var target = $(e.target).attr('href');
        var LastTab = $(e.relatedTarget).attr('href');

        if(target=="#att_mainstream") {            
            if($('#mainvideoOverlay').length == 0)
            {                   
                mainvideoObject.mainshow();
            };
        }   
        if(target=="#att_substream") {            
            if($('#subvideoOverlay').length == 0)
            {            
                subvideoObject.subshow();
            };
        }
        if(target=="#att_delayedstream") {              
            if($('#delayedvideoOverlay').length == 0)
            {                   
                delayedvideoObject.delayedshow();
            };
        }
    });

您可以使用on hide事件。直接在on show事件处理程序下添加以下代码：

$("a[data-toggle='tab']").on('hide.bs.tab', function(e){            
        var target = $(e.target).attr('href');

        if(target=="#att_mainstream")
        {
            $('#mainvideoOverlay').remove();
        }   
        if(target=="#att_substream")
        {
            $('#subvideoOverlay').remove();
        }   
        if(target=="#att_delayedstream")
        {
            $('#delayedvideoOverlay').remove();
        }   
});