单击未在div元素上注册的事件(jQuery/HTML/CSS)
这是我的游戏：(我还不能发布图片，所以我必须用文字解释)这是一个连接4游戏。想象一下7个div列。这7列在每个列元素中都有6个div芯片对象。(带42个芯片的7x6栅格)
- 我将每个芯片(每个黑圈)作为一个div对象放在每个列容器中。
- 那是..。每个.columncontainer div都在其下面嵌套了一组.chip div元素。(他们是筹码/圆圈)
我想要的：，我想能够点击一个特定的芯片对象(它们是div的..。我只想让那一个变成全黑。(默认不透明度设置为0.5)
，这是我的代码：
$(document).ready(function colorSelectionListener(){
$(".columncontainer").children().click(function() {
window.alert("clicked!");
$(this).css("opacity",1);
});实际发生了什么:当我点击任何一个芯片对象时，.什么都没发生。我一点也不能点击芯片。
我能做什么：来测试我是否可以点击我发出的警告“点击！”通过这种方式，我可以单击列容器。在打印“this”的索引时，我还可以检索列div的索引，如下所示：
window.alert($(this).index());而不是“点击！”消息。这让我觉得6...which没有道理..。因为6是列容器中的最后一个元素，即.column。(在我准备好芯片后，0-5元素必须是芯片，对吧？)
我尝试过的：，我尝试用芯片对象自己制作.click。(附加到每个芯片对象的类是'.chip')没有工作。(单击没有注册.但我认为这是另一个问题)
有人能启发我吗？
编辑1：Mini https://jsfiddle.net/9z916z2u/65/
如果有人能帮我，我真的很感激！我现在编写这个代码非常有趣，但这很烦人:/我大约3天前学会了jQuery/Javascript，所以我没有那么好。(我以前用Java/Python编写过代码)
回答 3
Stack Overflow用户
发布于 2015-02-27 06:11:14
试试这个：
$('.columncontainer .cheap').click(function(){
$(this).css('opacity', 1)
})或者，如果要动态添加.cheap块，可以使用此变体：
$('.columncontainer').on('click', '.cheap', function(){
$(this).css('opacity', 1)
})Stack Overflow用户
发布于 2015-02-27 06:07:58
$(document).ready(function(){
$(".columncontainer > childElement").click(function() {
window.alert("clicked!");
$(this).css("opacity",1);
}
});用d标记或.columncontainer的子元素类替换子元素
Stack Overflow用户
发布于 2015-03-02 01:21:17
在JSFiddle中发布的代码需要一些调整才能工作。我已经修改了事件订阅以匹配后期绑定(根据Anatoliy )。
$('.columncontainer').on('click', '.cheap', function(){而不是
$('.cheap').on('click', function(){并为position: relative类删除了.column。这里是现在的代码，它在Chrome和FF中工作。
然而，我认为答案是不一致的(为什么position: relative阻止绑定？)也许css大师可以解释这一点。
https://stackoverflow.com/questions/28758520
复制相似问题
腾讯云开发者
