如何防止jq递归点击

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时，都会有一个新的点击事件绑定到$（"#saveRole"），这意味着每次调用openInsertRoleDialog都会有n个点击绑定。这将解释第一次点击工作和每隔一次点击保存一次以上的情况。

我建议使用.one ，而不是点击

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