Bootstrap tabs and jQuery event firing issue

Question

As i am newbie JavaScript and jQuery so i am facing problem with the simple things.

I have created 3 bootstrap tabs. (ie mainstream,substream,delayedstream) , In all tabs i have created a vlc players using jQuery , the players works perfectly i didn't face any issue with that.

when the tab change event is triggered (ie when the switching to the other tab ) I am calling the jQuery function . That is responsible for the creation of my vlc player .

Here is the code i wrote to detect tab change event and trigger the corresponding function:-

$("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();
    }
});

Whenever we switch the tabs that particular tab function will be called.

Here is the real issue, whenever i switch the tabs , the creation of the vlcplayer is increasing to that particular tab.

(In brief to the problem when i first execute, In first tab By default it is only one player is created, When i visit the second or third tab and come back to the first tab again and resulting the creation of one more player in the first tab and it keep increasing on every consecutive visit to that particular tab and this same goes to the second and third tab , It keeps increasing the one extra player on every visit)

My thinking towards this problem is, may be it is calling the function for every tab change event and resulting the extra creation of the player .

So here is the JSFiddle for the complete code.

PS the code and output looks very clumsy as it is tightly formed. But we can observe the problem in Inspect Element option of browser that how on every tab change it is creating one extra player to that particular tab .

Here are the some snaps that will give the better understanding of the problem.

1)It is when i first execute it.(only one player is created)

2)After visiting the other tabs ie second or third tab and come back to the first tab again.

I am not getting the what the real issue is?

Any help that will be gratefully for me.

Thanks in advance.

Answer 1

EDIT :

My previous suggestion is down the bottom. But a better approach is probably to check if it already exists before calling 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();
            };
        }
    });

---

You could use the on hide event. Add the following code directly underneath your on show event handler:

$("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();
        }   
});