Question

这是我的游戏:(我无法发布图片所以我必须用文字解释）这是一款Connect 4游戏。想象一下7个div列。 7列在每个列元素中堆叠有6个div芯片对象。（7x6网格，42芯片）

我将每个芯片（每个黑色圆圈）作为div对象放在每个列容器中。
就是......每个.columncontainer div都嵌套了一堆.chip div元素。（他们是筹码/圈子）

我想要的是什么： 我希望能够点击一个特定的芯片对象（它们是div的黑色圆圈），我只想要一个全黑的。（默认不透明度我设置为0.5）

这是我的代码：

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

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

我可以做什么：要测试我是否可以点击某些内容，我会点击“点击”！通过这种方式，我可以单击columncontainers。当我打印出'this'的索引时，我也能够检索其中div列的索引，如下所示：

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

而不是'点击！'信息。它给了我6 ...这没有意义......因为6是columncontainer中的最后一个元素是.column。（在我将它们添加到正确之后，0-5元素必须是芯片？）

我尝试了什么：我尝试使用芯片对象自己创建.click。（附加到每个芯片对象的类是'.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容器的子类替换

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(){

已移除position: relative类的.column。 Here是代码现在的样子，它可以在Chrome和FF中使用。

但是，我认为答案是不一致的（为什么position: relative会阻止绑定？）并且css的主人可以解释这一点。

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

3 个答案: