оповещения показывает дважды вместо одного раза

Question

Мой код содержит два дивы с одинаковым класса («коробки»), но разные идентификаторов S следующим образом:

<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.

Answer 1

Посмотрите на это.

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

Вы регистрируете событие click каждый раз, когда вы вызываете метод x, который вы делаете на событие click.

Вы должны выйти из регистрации обработчика событий клика вне вашего метода. Нечто подобное,

$(function(){ 
var array1 = []; 
var array2 = [];  

    $('button').click(function() { 
     alert('clicked'); 
    }); 

}); 

Complete-упрощенная версия кода является

$(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 полный рабочий образец.