单击事件未在 div 元素 (jQuery/HTML/CSS) 上注册

Question

这是我的游戏：（我不会post图片所以我必须用文字解释）这是一个 Connect 4 游戏。想象一下 7 div 列。 7 列有 6 div 个芯片对象堆叠在每个列元素中。（7x6 网格，42 个筹码）

我将每个筹码（每个黑色圆圈）作为一个 div 对象添加到每个列容器中。
也就是说...每个 .columncontainer div 下嵌套了一堆 .chip div 元素。（他们是 chips/circles）

我想要的： 我希望能够单击一个特定的芯片对象（它们是 div 的..黑色圆圈）并且我只希望那个变成全黑。（默认不透明度我设置为0.5）

这是我的代码：

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

实际发生了什么： 当我点击任何芯片对象时...没有任何反应。我根本点不了筹码

我能做什么： 为了测试我是否可以点击某些东西，我发出了警报 "clicked!" 这样我就可以点击列容器了。当我打印出 'this' 的索引时，我还能够检索其中 div 列的索引，如下所示：

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

而不是 'clicked!' 消息。它给了我 6...这没有意义...因为 6 是 columncontainer 中的最后一个元素，即 .column。（0-5个元素一定是我添加后的筹码吧？）

我尝试了什么： 我尝试用芯片对象本身制作 .click。（附加到每个芯片对象的 class 是“.chip”）没有用。（点击没有注册...但我认为这是另一个问题）

谁能教教我？

编辑 1： 问题的迷你娱乐 https://jsfiddle.net/9z916z2u/65/

如果有人能帮助我，我将不胜感激！我现在编码这个很有趣，但这很烦人：/我大约 3 天前学会了 jQuery/Javascript，所以我不是那么好。（虽然我之前在 Java/Python 中编码过）

Answer 1

$(document).ready(function(){

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

将子元素替换为 d 标签或 .column 容器的子元素的 class

Answer 2

试试这个：

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

或者，如果您想动态添加 .cheap 块，您可以使用此变体：

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

Answer 3

JSFiddle 中的发布代码需要一些调整才能工作。我修改了事件订阅以匹配后期绑定（根据 Anatoliy Arkhipov 的说法）。

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

而不是

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

并为 .column class 删除了 position: relative。 Here 是代码现在的样子，它在 Chrome 和 FF 中工作。

但是，我认为答案不一致（为什么position: relative 阻止了绑定？）也许css 的高手可以解释一下。

单击事件未在 div 元素 (jQuery/HTML/CSS) 上注册

Click event not registering on div element (jQuery/HTML/CSS)

html

javascript

css

jquery

click