jQuery按钮单击事件不调用

时间:2018-11-03 10:50:57

标签: javascript jquery

我在向导中有一个按钮组...在向导最后一步到达时,保存并取消按钮显示。此代码位于单独的js代码文件中,该文件需要多次使用。

这是js文件

$(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]
    }
});

});

当我单击“保存”按钮时,事件未触发。 这是我在.cshtml文件中的点击按钮代码

$("#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');
                            }
                        });
                    }

                });

有人可以帮助我..吗? 预先感谢。

1 个答案:

答案 0 :(得分:0)

在您执行该操作时,该按钮可能尚未出现在文档中

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

使用事件委托以确保一旦按钮可用就捕获事件:

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