Question

我在两个按钮上都有两个按钮和警报功能。我希望如果用户点击第一个按钮，第一个按钮上的功能应该工作但是当用户点击第二个按钮然后第一个按钮上的功能不应该工作我的意思是如果用户点击了第二个按钮，该功能不应该在第一个按钮上工作。下面是代码，但它不起作用：

<script>
function abc(){
    alert ("its a alert box!");
}

function xyz(){
    var a=150;
    alert(a);
}

<body>
<input type="button" value="submit 1" onClick="abc();">

<input type="button" value="submit 2" onClick="xyz();">
</body>

Answer 1

单击第二个按钮时，可以使用jquery取消绑定第一个按钮的click事件。但是您需要添加一些id属性，以便您可以轻松完成。

<body>
<script>
function abc(){

   alert ("its a alert box!");
}
function xyz(){
   $('#btn1').unbind('click');
   var a=150;

   alert(a);   
}
</script>

<input id="btn1" type="button" value="submit 1" onClick="abc();"></input>

<input id="btn2" type="button" value="submit 2" onClick="xyz();"></input>
</body>

您还可以进一步优化代码，使其不依赖于内联的onclick属性。

$(document).ready(function(){
     $('#btn1').click(abc);
     $('#btn2').click(xyz);
})

Answer 2

使用jQuery（因为它是您为帖子提供的标签之一），您可以使用unbind。

Answer 3

对于初学者，请勿使用内联点击处理程序。恕我直言，这样的事情会更好：

<script>
$(document).ready(function(){

    function abc(){
       alert ("its a alert box!");
    }

    function xyz(){
       var a=150;
       alert(a);   
    }

   var bt1enabled = true;
   $('body').on('click', 'input[type=button]', function(){
      if(this.id==="btn1" && bt1enabled) {
          abc();
      } else if (this.id==="btn2") {
          btn1enabled = false; // or btn1enabled = !btn1enabled if this is supposed to toggle
          xyz();
      }
   });
}):
</script>

<body>
  <input id="btn1" type="button" value="submit 1"></input>  
  <input id="btn2" type="button" value="submit 2"></input>
</body>

Answer 4

试试这个

<div>
<input id="button1" type="button" value="Click1"/>
<input id="button2"type="button" value="Click2"/>
</div>

<script>
$('#button1').on('click', Button1Click);
$('#button2').on('click', Button2Click);

function Button1Click() {
    alert("You have clicked button 1");
}

function Button2Click() {
    alert("You have clicked button 2");
}

单击其他图像时，Javascript会禁用可单击的图像

4 个答案: