Question

我在JQuery中有以下代码

<script language="javascript">
    $(document).ready(function() {            
        $('#btnSaveRole').click(function(){
            $('#btnFinalSaveRole').click(function() {                
                var $_Role          =   $('#txtRole').val();
                var data = {
                    "Role"          : $_Role
                };    
                $.ajax({
                    url:            'http://localhost:1234/AdminSystem1/public/SaveRole',
                    method:         "POST",
                    async:          true,
                    data:           JSON.stringify(data),
                    contentType:    "application/json; charset=utf-8",
                    success: function (msg) {
                        $("btnSaveRole").unbind('click');
                        $("btnFinalSaveRole").unbind('click');

                    },
                    error: function (jqXHR) {
                        $("btnSaveRole").unbind('click');
                        $("btnFinalSaveRole").unbind('click');
                    }
                });
            });
        });
    });

</script>

问题是，当我再次点击同一按钮btnSaveRole时，会被点击两次。

为了解决我在下面使用的代码成功并且回调失败的问题

$("btnSaveRole").unbind('click');
$("btnFinalSaveRole").unbind('click');

我错过了什么吗？

Answer 1

首先，单击，将事件添加到btnFinalSaveRole 再次单击，将另一个事件添加到btnFinalSaveRole

因此，当您单击btnFinalSaveRole时，您将有两次单击。因为你点击了两次btnSaveRole。

jQuery click（）不会覆盖事件，它会将其附加到列表中。

所以在另一个事件中添加一个事件通常是一个坏主意。更好的想法是在外面绑定。如果你需要确保首先点击X，而不是制作一个布尔值。

var clicked = false;
$("#btnSaveRole").on("click", function(){
    clicked = true;
});
$("#btnFinalSaveRole").on("click", function(){
    if(clicked) {
        alert("yahoo");
    }
});

其他选择是取消绑定事件，而不是最好的，但可以工作。

$("#btnSaveRole").on("click", function(){
    $("#btnFinalSaveRole").off("click.val").on("click.val", function(){
        alert("hmmmm");
    });
});

Answer 2

试试这个。（由于我无法测试，因此无法保证）。它演示了使用.one() .on()版本的<script language="javascript"> $(document).ready(function() { $('#btnSaveRole').on("click", function() { $('#btnFinalSaveRole').one("click", function() { var $_Role = $('#txtRole').val(); var data = { "Role" : $_Role }; $.ajax({ url: 'http://localhost:1234/AdminSystem1/public/SaveRole', method: "POST", async: true, data: JSON.stringify(data), contentType: "application/json; charset=utf-8", }); }); }); }); </script>一旦使用后自动取消绑定

Accounts

第二次单击时，按钮会在后台单击两次

2 个答案: