trigger event on specific tab displayed

Question

I am using bootstrap 3 and specifically the tab display.

I want to fire an event when a specific tab is displayed so I ended up with a code coming from this question:

$('[href=#step3]').on('shown.bs.tab', function (e) {
    console.log("step3");
});

That looks perfectly fine for me but produce the following error:

Error: Syntax error, unrecognized expression: [href=#step3]

It looks weird to me since I don't find any syntax error in this snippet. The element exists and is defined as follows:

<li role="presentation" class="disabled">
    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Anteprima" class="scheda">
        <span class="round-tab">
            <i class="glyphicon glyphicon-credit-card"></i>
        </span>
    </a>
</li>

score 0 · Answer 1 · answered Jun 17 '20 at 15:19

Try to give you a link an id of step3 and run it this way

$('#step3').on('click', function (e) {
  console.log("step3");
});

or, you can give your li an id and check to see if that class is disabled or not and then do what you need to do

$('#step3').on('click', function (e) {
  if($('#topstep3').hasClass('disabled')) {
    console.log('i am disabled')
  } else {
    console.log('something else here')
  }
});

I changed the html to look like this

<li role="presentation" id="topstep3"class="disabled">
    <a href="#step3" id="step3" data-toggle="tab" aria-controls="step3" role="tab" title="Anteprima" class="scheda">
        <span class="round-tab">
            asdfasdf
        </span>
    </a>
</li>

Thanks but the question is about how to make my code working. I want to understand why it throws this error — Lelio Faieta, Jun 17 '20 at 16:35

score 0 · Accepted Answer · answered Jun 18 '20 at 07:15

it turns out it is just a typo in the original answer I copied without noticing.

it should be:

$('[href="#step3"]').on('shown.bs.tab', function (e) {

instead of

$('[href=#step3]').on('shown.bs.tab', function (e) {

I was missing the double quotes around the href value

trigger event on specific tab displayed

2 Answers2