Javascript для детей Selector не вызывается

Question

http://jsfiddle.net/w8ak1yyy/7/

Проект для создания цвета, основанные от ребенка. Я сосредоточен на фиксации LEFT div (GREEN box). Однако, когда я пытаюсь создать больше divs из левой части окна (GREY), он продолжает вызывать родительский div (GREEN). Он не создает div с дочернего щелчка.

Теперь я пытаюсь остановить распространение, чтобы ограничить вызов события только для дочернего элемента, но конкретные селекторы никогда не выбирают ребенка.

ЛИНИЯ 38:

$(".left-child").click(function(event){ 
     propStopped(event); 
     event.stopPropagation(); 
     propStopped(event); 
     alert("Found child"); 
    }); 

этот код должен предназначаться дочерний элемент, но не делает, и я также попытался следующие селекторы ниже, и они также не нашли ребенка.

$(".left-child") 
$(".left > .left-child") 
$("div.left" > .left-child") 

Конечный результат на данный момент должен сделать больше divs влево, нажав левую часть div. Строка 63 начинает добавлять левый div.

Я поместил счетчик, который отображается при нажатии на div, который обновляет родительский div (ЗЕЛЕНЫЙ), а не дочерний.

Answer 1

Вы не можете прикреплять событие к элементу, который еще не существует. Вы должны использовать делегирование событий:

$(".left").on("click", ".left-child", function(event){ 
    propStopped(event); 
    event.stopPropagation(); 
    propStopped(event); 
    alert("Found child"); 
});