引导选项卡和 jQuery 事件触发问题

Question

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

我创建了 3 个引导选项卡。(i.e. mainstream,substream,delayedstream), 在所有标签中，我使用jQuery 创建了一个vlc players，玩家可以工作 完全没有问题。

当标签更改事件被触发时（即切换到另一个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 tab 并返回@再次访问 987654346@ 并导致在 first tab 中创建了另一个 player 并且每次连续访问该特定 tab 时都会不断增加，second 和 third tab 也是如此，它不断增加每次访问时多一个player）

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

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

附： 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();
        }   
});