Question

当用户选择第一项并将其保存到数据库时，我弹出并选择html列表但是当用户选择第二项和第三项时，它会一直点击后台的保存按钮。我不知道如何预防它来自点击，我认为这是因为循环？

HTML

<form class="form-horizontal" novalidate="novalidate">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h2 class="modal-title">Role Editor</h2>
                </div>
                <div class="modal-body">
                    <div id="error-field-role" class="has-error">
                        <div class="form-group">
                            <label class="col-sm-5 control-label"> Role:</label>
                            <div class="col-sm-7">
                                <div class="input-group">
                                    <select id="ruleFields" class="form-control valid" data-bind="uniqueName: true, options: roleChoices, value: newRoleId, optionsText: &quot;name&quot;, optionsValue: &quot;recordId&quot;, optionsCaption: &quot;Choose...&quot;" name="ko_unique_1"><option value="">Choose...</option><option value="1">User</option><option value="2">Receiver</option><option value="3">Supervisor</option><option value="4">Administrator</option><option value="5">Privacy</option><option value="6">SystemConfigurator</option><option value="7">SystemAdministrator</option><option value="8">Quality</option><option value="9">QuickEvent</option><option value="10">test Roles</option><option value="11">ew1234</option><option value="12">test roles 123456</option><option value="13">fdssfdvsd</option><option value="14">yyyy</option><option value="15">222</option><option value="16">yttyjt</option><option value="17">77776</option><option value="18">99090</option><option value="19">fbdfb</option></select>
                                    <div class="input-group-addon">
                                        <span class="logo logo-required"></span>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveRole">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

                </div>
            </div>
        </form>

的JavaScript

 self.openInsertRoleDialog = function (event) {

        $("#add-role-dialog").modal("show");
        $("#saveRole").click(function (event) {
            event.isPropagationStopped();
            var save = true;
            var warning = "Please complete the following <hr/>";
            var role = $("#ruleFields").val();


            if (role == "") {
                save = false;
                warning = warning + 'You must select  a role' + '<br/>';
                $('#error-field-role').addClass("has-error");

            } else {

                $('#error-field-role').removeClass("has-error");
            }
            if (save) {
                self.insertRole();
                self.newRoleId('');
                $("#add-role-dialog").modal("hide");

            }
            else {
                toastr.warning(warning);
            }

        });
    };

    self.insertRole = function() {
        //make sure it's not already on the list
        //r Warning = "the Item is already on List" + '<hr/>';
        var alreadyOnList = false;
        $.each(self.selectedRule().rolesThatMustReview(), function(index, item) {
            if (item.RoleId === self.newRoleId()) {
                alreadyOnList = true;


                return false; //break
            } //if
        }); //each
        if (!alreadyOnList) {
            //resolve role name
            var roleName = '';
            $.each(self.roleChoices(), function(index, item) {
                if (item.recordId() === self.newRoleId()) {
                    roleName = item.name;
                    return false;//break
                }
            });
            self.selectedRule().rolesThatMustReview.push({
                RuleId: self.selectedRule().recordId(),
                RoleId: self.newRoleId(),
                RoleName: roleName,
                ShowNotification: false
            });//push

        }//if

    };

Answer 1

看来每次调用openInsertRoleDialog时，新的click事件都绑定到$（＆＃34; #saveRole＆＃34;），这意味着每次调用openInsertRoleDialog都会有n次点击绑定。这可以解释第一次点击工作和其他每次点击保存不止一次。

我建议使用.one

，而不是使用.click

$("#saveRole").one('click', function () { your save code here })

或者，因为如果发生警告，我不确定您是否仍然需要点击事件，您可以在成功保存时取消绑定点击事件，如下所示。

if (save) {
     self.insertRole();
     self.newRoleId('');
     $('#saveRole').unbind('click');
     $("#add-role-dialog").modal("hide");
}
else {
     toastr.warning(warning);
}

如何防止jq递归点击？

1 个答案: