Question

我有这个简单的jQuery脚本，当您单击链接时要求您确认操作。当它是普通的a href链接时，它工作得很好，但是我为按钮分配了onclick脚本，并且它不能阻止它触发。我需要它来防止它一次。我该如何实现？

$(".mybutton").one('click', function() {
    event.preventDefault();
    $(this).html("Are you sure?");   
});

function test() {
  $(".forthebutton").html("button click function worked");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="mybutton" onclick="test();">Button</button>

<br /><br /><br />

<span class="forthebutton">button click should change this text</span>

Answer 1

在这种情况下，您需要删除原始的onclick并退还给您，因为您无法使用onclick处理程序。

const btn = $(".mybutton");
const onclick = btn.prop('onclick'); // save onclick fn

btn.prop('onclick', null); // remove onclick from button
btn.one('click', function() {
    $(this).html("Are you sure?");
    btn.on('click', onclick); // add onclick back to button
});

function test() {
  $(".forthebutton").html("button click function worked");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="mybutton" onclick="test();">Button</button>

<br /><br /><br />

<span class="forthebutton">button click should change this text</span>

jQuery preventDefault onclick函数

1 个答案: