点击不在div元素上注册的事件（jQuery / HTML / CSS）

Question

This is my game: (i can't post images yet so I have to explain with words) This is a Connect 4 game. Imagine 7 div columns. The 7 columns have 6 div chip objects stacked in each column element. (7x6 grid with 42 chips)

• I put each chip (each black circle) as a div object prepended into each column container.
• that is... each .columncontainer div has nested under it a bunch of .chip div elements. (they're the chips/circles)

What I want: I want to be able to click a specific chip object (they're div's.. the black circles) and I want ONLY that one to turn full black. (default opacity I set to 0.5)

This is the code I have:

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

What's actually happening: When I click on ANY of the chip objects... NOTHING happens. I can't click the chips at all.

What I can do: To test if I can click something I made the alert "clicked!" In this way I am able to click the columncontainers. I am also able to retrieve the index of the column div inside it when I print out the index of 'this', like so:

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

instead of the 'clicked!' message. It gives me 6...which doesn't make sense... because 6 is the last element inside columncontainer which is .column. (0-5 elements must be the chips after I prepend them right?)

What I tried: I tried making the .click with the chip objects themselves. (the class attached to every chip object is '.chip') Did not work. (Click was not registering... but I think that's another problem)

Can someone enlighten me?

EDIT 1: Mini Recreation of Problem https://jsfiddle.net/9z916z2u/65/

If anyone could help me I would really really appreciate it! I'm having so much fun coding this right now but this is annoying :/ I learnt jQuery/Javascript around 3 days ago, so I'm not that good. (I have coded in Java/Python before though)

Answer 1

$(document).ready(function(){

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

replace child element with d tag or the class of the childred of .columncontainer

Answer 2

Try this:

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

Or, if you want to add .cheap blocks dynamically, you can use this variant:

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

Answer 3

Posted code in JSFiddle needs some adjustments to work. I've modified the event subscription to match late binding (according to Anatoliy Arkhipov).

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

Instead of

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

And removed position: relative for the .column class. Here is how the code looks now and it works in Chrome and FF.

However, I consider the answer to be not consistent (why does position: relative prevented binding?) and maybe masters of css can explain that.