警报显示两次而不是一次

Alert shows up twice instead of once

本文关键字：一次 两次 显示      更新时间：2023-09-26

我的代码包含两个具有相同类（"box"）但不同id的div，如下所示：

<div class="box" id="inside1">
  <button>Hey</button>
</div>
<div class="box" id="inside2>
  <button>Hey</button>
</div>

在每个div中都有一个隐藏的<button>。单击一个"框"后，两个按钮都会出现。如果用户单击其中一个按钮，则应将消息"嘿"推送到一个阵列（array1或array2，具体取决于用户单击的按钮），并且应向该阵列发出警报：

alert(array1[0]); // or alert(array2[0]) depending on button clicked

我的代码运行良好，但问题是，在单击其中一个按钮并获得1个警报后，如果我单击另一个按钮，我将获得2个警报，而不是1个。

这是我的代码：

var array1 = [];
var array2 = [];
$('body').once('click','.box', function() {
  $('button').show();
  var id = $(this).attr('id');
  function x(array) {
    $('button').click(function() {
      array.push("hey");
      y(array);
    });
  }
  function a() {
    if (id == "inside1") {
      x(array1);
    }
    if (id == "inside2") {
      x(array2);
    }
  }
  a();
});
function y(array) {
  alert(array[0]);
}

还有JSFiddle。

看看这个。

function x(array) {
        $('button').click(function() {
          array.push("hey");
          y(array);
        });
      }

每次调用x方法时都要注册click事件，这是在click事件上执行的。

您应该将click事件处理程序注册移出方法之外。类似

$(function(){
 var array1 = [];
 var array2 = [];    
  $('button').click(function() {
      alert('clicked');
  });
});

您的代码的完整简化版本是

$(function(){
  var array1 = [];
  var array2 = [];
    $('button').click(function() {
      var id=$(this).closest(".box").attr("id");
      if (id == "inside1") {
          y(array1,'hey');
      }
      else if (id == "inside2") {
          y(array2,'hey');
      }        
    }); 
    $('body').on('click','.box', function() {
       $('button').show();     
    });    
});
function y(array,val) {
  array.push(val);
  alert(array[0]);
}

这是一个完整的工作样本。

相关文章：