Как посчитать дивы на клик в setInterval функции

Question

я писал этот код, чтобы подсчитать, когда пользователь щелкает на площади (ДИВ)

var run = false; 
$(document).on('click', function(){ 
    if(run) return; 
    run = true; 
    setInterval(function(){ 
    $("#div").removeClass(); 
    $("#div").addClass("square").clone().appendTo("#container"); 
    $(".square").click(function(){ 
     $('#score').html(function(x, val) { return val*1+1 }) 
    }) 
    },2000) 
}) 

, но проблема в том, что, когда я снова нажмите квадрат, это добавляет один для каждого div, присутствующего на экране, я хочу добавить только один пункт.

Вот в действии: http://jsfiddle.net/gwxfvesn/

Как я могу исправить это?

Answer 1

Это потому, что, пока вы используете setInterval, вы (повторно) добавляете прослушиватель событий щелчка на каждый квадрат, а не только новый.

При создании элемента, только цепь на .click, так что это относится только к этому элементу:

setInterval(function(){ 
    $("#div").removeClass(); 
    $("#div").addClass("square").clone().appendTo("#container") 
     .click(function(){ 
     $('#score').html(function(x, val) { return val*1+1 }) 
    }) 
},2000) 

jsFiddle: http://jsfiddle.net/theonlygusti/gwxfvesn/7/

Вы должны добавить щелчок слушателя только к новый элемент.