Javascript 按钮-单击其中一个按钮后如何停止工作_Javascript_Jquery_Html

Javascript 按钮-单击其中一个按钮后如何停止工作

javascript jquery html

Javascript 按钮-单击其中一个按钮后如何停止工作,javascript,jquery,html,Javascript,Jquery,Html,在我的代码中，我有两个按钮，我想确认用户是否单击了其中任何一个按钮，它将执行该功能，并且它已经工作了，但是如果它再次单击，它将不会做任何事情我的HTML代码： <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="jquery-3.1.1.js"></script> <script src="JS.js"><

在我的代码中，我有两个按钮，我想确认用户是否单击了其中任何一个按钮，它将执行该功能，并且它已经工作了，但是如果它再次单击，它将不会做任何事情

我的HTML代码：

<html>
<head>
<meta charset="UTF-8">

<title>Demo</title>
<script src="jquery-3.1.1.js"></script>
<script src="JS.js"></script>
<!--script src="JS2.js"></script-->
</head>

<body>
  <p><input type="button" name="click" value="Button I" id="1" onclick="myFunction();"/></p>
<p><input type="button" name="click" value="Button II" id="2" onclick="myFunction2();"/></p>

</body>
</html>

谢谢。

< p>因为使用jQuery，请考虑使用.1函数。你会像这样使用它。从每个输入元素中删除onclick=myFunction。然后使用.js文件中的JQuery：

/**** add this here ****/
$(function(){
    /* EDIT: I noticed you're wanting to call a different fcn
       depending on which button is clicked. With my solution you 
       could handle this like so: */
    $('input').one('click', function(){
        if($(this).attr('id') !== '2') myFunction();
        else myFunction2();
    });
});

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $.ajax({
      type: 'POST',
      dataType: "json",
      contentType: "application/json",
      url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      data: JSON.stringify({
        "xxxxxxxxxxx":xxxxxxx,
        "xxxxxxxxxxxx":xxxxxxxxx,
        "xxxxxxxxxxxx":"xxxxxxx"
    }),
    success:function(output) {
        console.log(output);
        otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
    },
    error:function(output) {
       /**** also add here NOTE: in myFunction2() 
             you'll want to call myFunction2 here ****/
      $('input').one('click', myFunction);
    }
    });
}

one函数将在与选择器匹配的每个元素上触发一次后解除绑定

编辑：如果您的AJAX请求碰巧返回错误，您可能希望将单击处理程序重新附加到按钮上。在这种情况下，将上面的代码添加到错误回调中，以便用户可以再次单击，如果这是您想要的行为

对于jquery 1.6及以上版本，请使用：

$("input[type='button']").prop("disable", true)

对于小于1.6的版本，请使用

$("input[type='button']").attr('disabled','disabled');

一、我个人认为，在调用ajax之前，我会把它放在函数的顶部

这样，如果出现错误，可以在错误处理程序中反转属性

编辑

经过一些测试，我明白了你所说的“不工作”的意思。以下是一些备选方案，包括原始方案：

$("input")[0].disabled = true;
$("input")[1].disabled = true;

假设您只有两个输入按钮，没有文本框

另一种方式：

$("input").prop("disabled", true);

再次假设您的文档上没有其他输入

最后是原始答案，稍作改动：

$("input[type='button']").prop("disabled", true);

注意到“禁用”已更改为“禁用”

我用微软的Edge尝试了所有这些方法，每一种都有效。我建议你从第一个开始，一路往下走，直到找到一个适合你的解决方案

您的代码将如下所示

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $("input[type='button']").prop("disabled", true); <-- or one of the other choices here

    $.ajax({
    type: 'POST',
    dataType: "json",
    contentType: "application/json",
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    data: JSON.stringify({
            "xxxxxxxxxxx":xxxxxxx,
            "xxxxxxxxxxxx":xxxxxxxxx,
            "xxxxxxxxxxxx":"xxxxxxx"
    }),
        success:function(output) {
            console.log(output);

            otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
       },
        error:function(output) {

       }
    });
}

干杯和好运

为什么不在单击后禁用它们？您使用什么变量来存储按钮的单击次数？您在哪里测试这是第一次单击其中一个按钮？在功能结束时禁用。在这种情况下，仅在单击后禁用。我将在数据库中创建一个表来执行@Cubi检查，但稍后我会尝试。这只是一个可能的复制品，不是一个好的解决方案。如果ajax的结果是错误btn被锁定…不确定ajax错误处理应该是按钮的角色。OP只想让myfunction启动一次，这就可以了。OP想当按钮执行操作时，他被禁用了。我们没有上下文。如果按钮不执行其功能，它仍将被您的解决方案阻止。它将被每个解决方案阻止。如果出现错误，他将需要逆转他所采取的任何步骤，以禁用按钮箱以获得帮助@Cruiser+1如果将其添加到成功功能中，则仅禁用成功按钮；-。如果用户单击ajax之前的按钮，将其放入成功函数并不能阻止它再次启动returns@Alexis同意。但是，在某些情况下，用户可以在ajax返回之前单击两次。在顶部禁用它们应该可以消除这种可能性。否则我当然同意你的看法你是对的。因此，在呼叫时禁用，并在出错时启用。我尝试了它，但如果我再次单击，功能将再次激活，我不希望出现这种情况，如果用户单击按钮，功能将执行，如果用户再次单击，按钮将不再工作，请将此与我的代码放在一起？也许我做错了什么

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $("input[type='button']").prop("disabled", true); <-- or one of the other choices here

    $.ajax({
    type: 'POST',
    dataType: "json",
    contentType: "application/json",
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    data: JSON.stringify({
            "xxxxxxxxxxx":xxxxxxx,
            "xxxxxxxxxxxx":xxxxxxxxx,
            "xxxxxxxxxxxx":"xxxxxxx"
    }),
        success:function(output) {
            console.log(output);

            otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
       },
        error:function(output) {

       }
    });
}