jquery button click event not invoking

Question

i have a button group in from wizard ...save and cancel button show when wizard reached at final step. this code in separate js code file that is use multiple time.

here is the js file

$(document).ready(function () {
//for form wizard
// Step show event
$("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
    //alert("You are on step "+stepNumber+" now");
    if (stepPosition === 'first') {
        $("#savecancle").hide();
        $("#prev-btn").addClass('disabled');
    } else if (stepPosition === 'final') {
        $("#savecancle").show().css("float", "right");
        $("#next-btn").addClass('disabled');
    } else {
        $("#prev-btn").removeClass('disabled');
        $("#next-btn").removeClass('disabled');
    }
});

// Toolbar extra buttons
var btnFinish = $('<button></button>').text('Save')
                                 .addClass('btn btn-info').attr("id","save")
                                 .on('click', function () { /*alert('Finish Clicked');*/ });
var btnCancel = $('<button></button>').text('Cancel')
                                 .addClass('btn btn-danger')
                                 .on('click', function () { $('#smartwizard').smartWizard("reset"); });

// Smart Wizard 1
$('#smartwizard').smartWizard({
    selected: 0,
    theme: 'arrows',
    transitionEffect: 'fade',
    showStepURLhash: false,
    toolbarSettings: {
        toolbarPosition: 'bottom',
        toolbarExtraButtons: [btnFinish, btnCancel]
    }
});

});

when i click on save button the event dose not fired. here is my click button code in .cshtml file

$("#save").click(function () {
                    var isAllValid = true;
                    //Save if valid
                    if (isAllValid) {
                        var data = {
                            tblOrderDetailSubs: orderItems
                        }

                        $(this).val('Please wait...');

                        $.ajax({
                            url: '/Order/OrderAdd',
                            type: "POST",
                            data: data,
                            success: function (d) {
                                if (d.status == true) {
                                    alert('Successfully done.');
                                    //clear form
                                    orderItems = [];
                                }
                                else {
                                    alert('Failed');
                                }
                                $('#save').val('Save');
                            },
                            error: function () {
                                alert('Error. Please try again.');
                                $('#save').val('Save');
                            }
                        });
                    }

                });

can anyone help me ..? thanks in advance.

Answer 1

The button might not be in the document yet at the moment you execute:

$("#save").click(function () {
    ...
});

Use event delegation to be sure that the event is captured once the button is available:

$("#smartwizard").on("click", "#save", function () {
    ...
});