启用按钮只能单击一次异常？

Question

我使用对话框来获取用户输入，但我发现用户可能会双击按钮并添加两次内容，原因是对话框淡出太慢或用户在鼠标上单击了两次..我不想要调整淡出速度，相反，如何使按钮只能单击一次？

Answer 1

jQuery 提供one()方法来注册只运行一次的一次性处理程序。

你可以写：

$("#yourButton").one("click", function() {
    // Add content...
});

Answer 2

您可以在单击按钮后禁用该按钮以防止进一步单击：

$('button').on('click', function() {
    $(this).prop('disabled', true);
});

Answer 3

这是我的建议。 如果您在退出时销毁对话框，只需解除单击事件的绑定

$('.my-button').on('click', function(){
    // process code
    $(this).off('click');
});

你可以在这里阅读

这是一个演示。 第一个不允许其他点击，但第二个允许。

来源

Answer 4

这是一个Plunker ，它展示了如何做到这一点。 您几乎需要做的就是在按钮中添加以下行：

onClick="this.disabled = true;"

这样您的按钮 HTML 将如下所示：

<button type="submit" onClick="this.disabled = true;">Submit</button>

Answer 5

试试这个：

    $('.myButton').click(function(){ 

        $(this).attr('disabled',true);

             ....
    })

Answer 6

用css试试这个

$("#yourButton").one("click", function() {
     $(this).css('pointer-events', 'none');
})