Trigger a jquery when a specific tab is active

Question

I'm trying to trigger a jquery event when a specific tab (payment) is active.

Here the tab header:

<ul class="nav nav-pills style2 nav-justified checkouttabs">
    <li class="active">
        <a href="#shopping-cart" data-toggle="tab">
            1. Cart
            <div class="icon">
                <i class="fa fa-check"></i>
            </div>
        </a>
    </li>
    <li>
        <a href="#billing-info" data-toggle="tab">
            2. shippinginformation
            <div class="icon">
                <i class="fa fa-home"></i>
            </div>
        </a>
    </li>
    <li>
        <a href="#payment" class="payment" data-toggle="tab">
            3. Checkout
            <div class="icon">
                <i class="fa fa-credit-card"></i>
            </div>
        </a>
    </li>
</ul>

I tried checking to trigger the event when the tab i clicked like this:

$('.payment').on('click', function(e) {

    /*jquery event*/

});

But this doesn't trigger on the first click, it only triggers when the tab is already open.

Answer 1

There was another function which was interfering. I moved the code above the other scrips and it now works as it should