Tab change event

JavaScript
1

I’m trying to create an event which will be fired when an tab is changed. I’m using dynamic Bootstrap tabs. My code:

$('#bs-tab2').on("shown.bs.tab",function(event){
        alert("hello");
    });

<div class="tab-content">
    <div id="tabs-1" class="tab-pane fade active in">
      <div id="chartContainerRaw" style="height: 370px; width: 100%;"></div>
    </div>
    <div id="tabs-2" class="tab-pane">
      <div id="chartContainerFiltered" style="height: 370px; width: 100%;"></div>
    </div>
    </div>
    <br><br>
    <div class="panel panel-default">
        <div class="panel-body">
        <ul class="nav nav-pills nav-jt">
        <li class="active"><a data-toggle="tab" id="bs-tab1" href="#tabs-1">Raw</a></li>
        <li><a data-toggle="tab" id="bs-tab2" href="#tabs-2">Filtered</a></li>
        </ul>
        </div>
    </div>

The problem is that alert(“hello”) not runs.

2

Nothing in your code contains a “bs-tab2” tag. If you want to refer to the link element with the ID ‘bs-tab2’, the correct jQuery selector would be $("#bs-tab2")

3

I change this but still the same problem

4

Show me your full HTML. (For those that follow, assuming i’m not responding: I am assuming a JS bind before object creation.)

5

Problem solved. I was linking incorrect scripts. Those are the good ones:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.