Question

我的代码包含两个具有相同类的div（＆＃34; box＆＃34;）但不同的 id s如下：

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

在每个div中隐藏着一个<button>。一旦一个＆＃34;框＆＃34;单击，两个按钮都会出现。如果用户点击其中一个按钮，则消息＆＃34;嘿＆＃34;应该被推送到一个数组（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。

Answer 1

看看这个。

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]);
}

Here是一份完整的工作样本。

警报显示两次而不是一次

1 个答案: