Нажмите событие, не регистрирующееся на элементе div (jQuery/HTML/CSS)

Question

Это моя игра: (я не могу опубликовать изображения, поэтому я должен объяснить словами) Это игра Connect 4. Представьте 7 колонн div. В 7 столбцах есть 6 объектов-чипов, уложенных в каждый элемент столбца. (7x6 сетка с 42 чипами)

• Я положил каждый чип (каждый черный круг) в качестве объекта сНа предварённого в каждый контейнер столбца.
• это ... каждый .columncontainer div вложен в него связку .chip div элементов. (Они Чипы/круги)

Что я хочу: Я хочу, чтобы иметь возможность нажать на конкретный объект чипа (они Div в .. черные кружки), и я хочу только то, что один чтобы превратить полный черный цвет. (По умолчанию Непрозрачность я установил 0.5)

Это код, у меня есть:

$(document).ready(function colorSelectionListener(){ 
$(".columncontainer").children().click(function() { 
    window.alert("clicked!"); 
    $(this).css("opacity",1); 
}); 

Что происходит на самом деле: Когда я нажимаю на любой из объектов чип ... ничего не происходит. Я вообще не могу щелкнуть фишки.

Что я могу сделать: Чтобы проверить, могу ли я щелкнуть что-то, я сделал предупреждение «нажал!». Таким образом, я могу щелкнуть столбец columncontainers. Я также в состоянии получить индекс столбца DIV внутри него, когда я распечатать индекс «это», вот так: «! Щелкнул»

window.alert($(this).index()); 

вместо того, сообщение. Это дает мне 6 ... что не имеет смысла ... потому что 6 является последним элементом внутри столбца контейнера, который является .column. (0-5 элементов должны быть чипами после того, как я добавлю их правильно?)

Что я пытался: Я пробовал делать .click с самими объектами чипа. (класс, прикрепленный к каждому объекту чипа, является «.chip»). Не работает. (Щелчок не регистрировался ... но я думаю, что это еще одна проблема)

Может кто-нибудь просветить меня?

EDIT 1: Mini Воссоздание проблемы https://jsfiddle.net/9z916z2u/65/

Если кто-то может помочь мне, что я действительно очень ценю это! Мне сейчас очень нравится кодирование, но это раздражает:/Я изучил jQuery/Javascript около 3 дней назад, поэтому я не так хорош. (Я закодирован в Java/Python, прежде чем хотя)

Answer 1

Попробуйте это:

$('.columncontainer .cheap').click(function(){ 
    $(this).css('opacity', 1) 
}) 

Или, если вы хотите добавить .cheap блоки динамически, вы можете использовать этот вариант:

$('.columncontainer').on('click', '.cheap', function(){ 
    $(this).css('opacity', 1) 
}) 

Answer 2

$(document).ready(function(){ 

    $(".columncontainer > childElement").click(function() { 
     window.alert("clicked!"); 
     $(this).css("opacity",1); 
    }  
}); 

заменить дочерний элемент с д тега или класса childred из.columncontainer

Answer 3

Опубликовано код в JSFiddle нуждается некоторые коррективы в работу. Я изменил подписку на события, чтобы соответствовать позднему связыванию (по словам Анатолия Архипова).

$('.columncontainer').on('click', '.cheap', function(){ 

Вместо

$('.cheap').on('click', function(){ 

И удалили position: relative для .column класса. Here - как выглядит код сейчас, и он работает в Chrome и FF.

Однако, я считаю, что ответ несовместим (почему position: relative не удалось связать?), И, может быть, мастера css могут это объяснить.