Not able to find out the id of the button for which a jquery function was called?

Question

I have two buttons in my Twitter Bootstrap wizard :-

<div class="form-actions">
    <div class="row">
        <div class="col-sm-12">
            <ul class="pager wizard no-margin">
                <!--<li class="previous first disabled">
                <a href="javascript:void(0);" class="btn btn-lg btn-default"> First </a>
                </li>-->
                <li class="previous disabled">
                        <a id="prev" href="javascript:void(0);" class="btn btn-lg btn-default"> Previous </a>
                </li>
                <!--<li class="next last">
                <a href="javascript:void(0);" class="btn btn-lg btn-primary"> Last </a>
                </li>-->
                <li class="next" id="skip">
                        <a id="skip" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Skip </a>
                </li>
                <li class="next" id="next">
                        <a id="next" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Next </a>
                </li>
                 <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
                 <input type='button' class='btn button-last btn-default' style="display:none;" name='last' value='Skip GG setup' />
            </ul>
        </div>
    </div>
</div>

So, the Bootstrap wizard has a function called onNext. Now in this function I am trying to find out which button the user clicked on to trigger this event. I tried something as shown in the code below but it doesn't really work.

$('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
        $("li.next").click(function() {
            var id = "";
            id = this.id; // or alert($(this).attr('id'));
            alert(id);
        });
    });
});

Answer 1

Your need to remove the click handler function. You can get the index of the clicked tab. Your HTML is not accurate or not complete. Check the documentation.

Check this jsfiddle example.

UPDATE: This way you get the ID. Jsfiddle

$('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
        //
    }
});

$("li.next").click(function(event) {
    console.log(event.target.id);   // get the id
});

Answer 2

I can't get to the Wizard docs right now, but I think this is what you'd need to do:

'onNext': function (tab, navigation, index) {
    var id = $(tab).attr('id');
    alert(id);
}

If that doesn't work, you can probably use the index to get it:

'onNext': function (tab, navigation, index) {
    var id = $('.wizard > li').eq(index).attr('id');
    alert(id);
}

Should probably put an ID on the ul to avoid ambiguity with the selector.