CODEWITHSUNDEEP
jqueryjquery-plugins
Mir Shakeel Hussain
Mir Shakeel Hussain

Reputation: 517

jquery function call multiple times on class name need to prevent

i need to call js function on LIST ITEM click but when event fires it calls the event number of times

JS 

$('.first').click(function () {

    //remove previous class and add it to clicked tab
    items.removeClass('current');
    $(this).addClass('current');

    $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();

    window.location.hash = $(this).attr('tab');
});

HTML

<div id="v-nav">
                <ul>

                    <li tab="tab1" class=" first CmclTabCss  current "> <span class="spn_InerCom"> Commercial Sector </span> <span class="tab1Current spn_Nmbr"> </span></li>
                    <li tab="tab2" class="first DMTabCss"><span class="spn_InerDip">Diplomatic Missions</span><span class="tab1CurrentD spn_Nmbr"></span></li>
                    <li tab="tab3" class="first GovTabCss"><span class="spn_InerGov">Government Sector</span><span class="tab1CurrentG spn_Nmbr"></span></li>
                    <li tab="tab4" class="first WrldTabCss"><span class="spn_InerWld">Outside Kingdom</span><span class="tab1CurrentW spn_Nmbr"> </span></li>
                    <li tab="tab5" class="first ImgTabCss"><span class="spn_InerImg">Images</span><span class="tab1CurrentI spn_Nmbr"> </span></li>
                    <li tab="tab6" class="first"><span class="spn_InerNews">News Archive</span><span class="tab1CurrentN spn_Nmbr"> </span></li>

                    <li tab="tab7" class="first PplTabCss"><span class="spn_InerIndual">Site Users</span><span class="tab1CurrentIndual spn_Nmbr"></span></li>

                </ul>
</div>

Upvotes: 0

Views: 523

Answers (1)

Gabriel Petrovay
Gabriel Petrovay

Reputation: 21864

The code you provided is correct. Check it out here: jsfiddle

There must be other part of your code that triggers the click handler multiple times.

For the problem described this code does the job (omitted your specific code for clarity):

$('.first').click(function () {
    $('.first').removeClass('current');
    $(this).addClass('current');
    window.location.hash = $(this).attr('tab');
});

Upvotes: 1

Related Questions