Question

我正在尝试禁用在单击后提交表单的链接。这需要停止来自同一用户的重复请求。这是我的代码，但不幸的是它没有用。

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>

<script type="text/javascript">
    $('#submit-form-link').click(function(){
        $('submit-form-link', this).attr('style', 'pointer-events: none;');
    });
</script>

我觉得我很接近，但它只是不起作用。

Answer 1

你错了。摆脱内联onclick事件处理程序并在文档就绪调用中使用它：

$('#submit-form-link').one('click', function(){
    $('form').submit();
});

这会将click事件绑定到您的链接，但在第一次单击后将其解除绑定。

您可以在此 jsFiddle example 的控制台中查看此内容。第一次单击链接时，它会尝试提交表单，但不会尝试后续点击。

Answer 2

试试这个：

...
$('submit-form-link').off().click(function() { return false; });
...

Answer 3

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>

<script type="text/javascript">
    $('#submit-form-link').click(function(){
        if (!$(this).hasClass('disabled')) {
            $('submit-form-link', this).attr('class', 'next disabled');
            return true;
        }
        return false;
    });
</script>

在这里，您可以创建一个类disabled并根据需要设置样式。只需在单击按钮后添加此类，即可知道它已被禁用。然后，如果已单击该按钮，则返回false以停止该事件。

Answer 4

在第一次单击事件回调函数

中再次绑定click事件

$('#submit-form-link').click(function(){
    $('submit-form-link', this).attr('style', 'pointer-events: none;');

     $(this).click(function(e){e.preventDefault})
});

Answer 5

您必须删除onclick属性。

$('#submit-form-link').click(function(){
    $(this).removeAttr('onclick');
});

此外，$('submit-form-link', this)完全错误。您正在选择submit-form-link类型的节点，这些节点是this的子节点。首先，您需要#submit-form-link，第二个this已经是您刚刚点击的链接节点的引用。

单击后禁用HTML链接

5 个答案: