div磁贴上的Jquery单击事件不起作用答案

【问题标题】：Jquery click event on a div tile not workdiv磁贴上的Jquery单击事件不起作用
【发布时间】：2016-01-07 06:15:09
【问题描述】：

div 磁贴上的 Jquery 单击事件不起作用。我不想在 jquery 脚本中直接操作 CSS

我用一个简单的 div 创建了一个磁贴。我有四个 div。每个 div 都有一个“tiles”类。这 4 个 div 在外部更大的 div 中，但我想这在这里无关紧要。我添加了一些查询代码以确保当我单击一个 tile 时，会添加一个新类“activeTiles” .在我的css文件中，瓷砖类有一个背景色“蓝色”，而activeTile类有一个背景色“青色”。所以我写的jquery代码，添加了“activeTile”类，这样瓷砖的颜色就会改变。我我正在使用“mousedown”事件。但是，我面临的问题是，即使在单击时添加了新类，在我将鼠标移出 div 区域之前，瓷砖的颜色不会改变。所以本质上，当我按下鼠标按钮并离开鼠标按钮时，在控制台中我的日志被打印出事件处理程序被点击。但是在我将鼠标光标移出 div 之前，瓷砖的颜色不会改变。谁能告诉为什么？这是我的tile 和 activetile 以及 jquery 代码。

.tiles {
color: white;
width: 120px;
height: 120px;
/*margin: 0 auto;*/
background-color: #3399CC;
padding: 10px;
position: relative;
border: 2px solid #2F4F4F;
transition: all 0.5s ease;
/*text-align: center;*/
vertical-align: middle;
line-height: 13;
font-weight: bold;
}



.activeTile {
background-color: cyan;
}

这里是jquery函数：

$(function() {
$(".tiles").on('mousedown',function() {
console.log("tile clicked")
$(".activeTile").removeClass("activeTile");
$(this).toggleClass("activeTile");
});
});

【问题讨论】：

尝试点击而不是 mousedown- $(".tiles").on("click",function(){})
对不起朋友，已经试过了，还是不行。
你能做小提琴吗？
我如何制作小提琴？
您的代码中是否包含code.jquery.com/jquery-2.1.0.js。你的代码工作完美。 jsfiddle.net/57qx6c6e.

标签： javascript jquery html css

【解决方案1】：

试试

$(".tiles").on('click', function() {
      $(".tiles").removeClass("activeTile");
      $(this).toggleClass("activeTile");
    });

css

.tiles:not(.activeTile):hover{background-color: #0047AB;}

【讨论】：

我不想在我的脚本中混合 css。我想保留它九月。这不是一个好习惯。感谢您的输入，但我想将 css sep 保留在 css 文件中
@virtualgod 你设置了.tiles:hover { background-color: #0047AB; 这会导致问题设置为青色但在悬停时设置为蓝色
debin 这似乎是问题所在。当我删除悬停效果时，这是有效的。还有两个问题：1.如何保持悬停效果？请记住，我不希望直接在 jqueyr 脚本 2 中进行 css 操作。我验证了您的建议，这似乎是问题所在，但即使这样，如果我直接使用 jquery 脚本中的 css 更改背景颜色，它仍然可以工作。那为什么呢？
。你能解开我最后的疑惑吗？使用上面的错误代码，现在很明显，由于悬停效果的出现，错误在我的 css 文件中。这是一个很好的收获。但是，我仍然无法理解最后一件事。即使使用我原来的错误代码和 jquery 代码，如果我添加了额外的一行：$(this).css('background-color', '0047AB');，那么问题就不会发生。但是我不想修改jqyer中的css。我仍然不明白的是，如果我在 jquery 脚本中操作 css，为什么错误的 CSS 悬停代码没有启动。有什么建议吗？
如果对您有帮助，请接受它作为答案，以便其他人可以参考

【解决方案2】：

试试这个

 $(function() {
   $('body').on('mousedown', '.tiles', function(event) {
     console.log("tile clicked")
     $(".activeTile").removeClass("activeTile");
       $(this).toggleClass("activeTile");
    });
});

【讨论】：

【解决方案3】：

试试这个

$(document).on('click', '.tiles', function(e) {
       //code    
});

【讨论】：

【解决方案4】：

事件处理程序应该是 click 而你应该这样做 Event delegation，它允许我们将单个事件侦听器附加到父元素，这将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

$(function() {
  $(document).on('click', '.tiles', function() {
    $(".activeTile").removeClass("activeTile");
    $(this).addClass("activeTile");
  });
});

【讨论】：

【解决方案5】：

这是确切的点击事件..

$(".tiles").click(function(){
    $(".tiles").removeClass("activeTile");
    $(this).toggleClass("activeTile");
});

【讨论】：

【解决方案6】：

$('.tiles').on('click', function (e) {
  $('.activeTile').removeClass('activeTile');
  $(e.currentTarget).addClass('activeTile');
});

另外，请添加更多有关周围 HTML 或环境的信息以缩小问题范围，因为点击功能可能不是这里的问题。

【讨论】：

【解决方案7】：

试试这个代码...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tiles { color: white; width: 120px; height: 120px; /*margin: 0 auto;*/
background-color: #3399CC; padding: 10px; position: relative; border: 2px solid #2F4F4F; transition: all 0.5s ease; /*text-align: center;*/
vertical-align: middle; line-height: 13; font-weight: bold; }
.activeTile { background-color: cyan; }
</style>
<script type="text/javascript">
$(function() {
$(".tiles").on('click',function() {
console.log("tile clicked");
$(".activeTile").removeClass("activeTile");
$(this).toggleClass("activeTile");
});
});
</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="tiles">first div</div></td>
<td><div class="tiles">second div</div></td>
<td><div class="tiles">third div</div></td>
<td><div class="tiles">fourth div</div></td>
</tr>
</table>
</body>
</html>

【讨论】：

但我的图块在表格中，表格在 div 中。那为什么这不起作用？是不是一些与 jquery 相关的东西，我必须学习更多才能让它工作？你能解释一下吗？上面的代码有效，但不能解决我的目的
请立即检查。我在 div 中添加了表格 :)
debin 建议是我的 css 文件的悬停属性导致它。我部分同意他的看法。当我移除悬停时，一切正常。但现在 2 个问题是 1. 如何更改悬停颜色？再次使用 jquery 添加 hoverTileClass 之类的自定义类？ 2. 如果我通过 jquery 直接操作 css 并且仍然将悬停留在 css 文件中，为什么它会起作用？可以分享一下你的邮箱吗？
我的电子邮件ID“narender.lodhi4us@gmail.com”