div瓷砖上的jQuery click事件不起作用

Question

Jquery click event on a div tile not working. div磁贴上的jQuery单击事件不起作用。 I do not want to manipulate CSS directly in jquery script 我不想直接在jquery脚本中操作CSS

I created a tile with a simple div. 我创建了一个带有简单div的图块。 I have four divs. 我有四个div。 Each div has a class "tiles. These 4 divs are in a outer bigger div but I guess that does not matter here. I added some query code to make sure that when i click on a tile, a new class "activeTiles" get added. In my css file, the tiles class has a background color "blue" and the activeTile class has background color "cyan". So the jquery code I wrote, adds the class "activeTile" so that the color changes for the tile. I am using "mousedown" event. However, the problem I face is that even though the new class gets added on clicking, the color of the tile does not change until I move the mouse out of the div area of the tile. So essentially, when i press mouse button and leave mouse button, in the console my log gets printed that event handler clicked. But the color of the tile is not changing until i move the mouse curosr out of the div. Can anyone tell why? here is my tile and activetile and jquery code. 每个div都有一个“ tiles”类。这4个div位于外部较大的div中，但是我想这没关系。我添加了一些查询代码，以确保当我单击图块时，添加了一个新类“ activeTiles”在我的css文件中，tile类的背景颜色为“蓝色”，而activeTile类的背景颜色为“青色”。因此，我编写的jquery代码添加了类“ activeTile”，以便颜色变化为tile。我正在使用“ mousedown”事件。但是，我面临的问题是，即使在单击时添加了新类，但直到将鼠标移出图块的div区域，图块的颜色都不会改变。当我按下鼠标按钮并保留鼠标按钮时，在控制台中我的日志被打印出来，单击了事件处理程序，但是直到我将鼠标光标移出div为止，磁贴的颜色才改变。平铺，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;
}

Here is the jquery function: 这是jquery函数：

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

Answer 1

Try 尝试

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

css 的CSS

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

Answer 2

Try this one 试试这个

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

Answer 3

Try this 尝试这个

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

Answer 4

Event handler should be click and you should be doing Event delegation , it allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. 应该单击事件处理程序，并且应该执行事件委托 ，它使我们可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

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

Answer 5

This is the exact click event.. 这是确切的点击事件。

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

Answer 6

Try this code... 试试这个代码...

<!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>

Answer 7

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

Also, please add some more information on the surrounding HTML or environment to narrow the issue down because the click function might not be the issue here. 另外，请在周围的HTML或环境中添加更多信息，以缩小问题的范围，因为在这里单击功能可能不是问题。

div瓷砖上的jQuery click事件不起作用

问题描述

7 个解决方案

解决方案1
2 已采纳 2016-01-07 06:52:04

解决方案2
0 2016-01-07 06:20:37

解决方案3
0 2016-01-07 06:22:19

解决方案4
0 2016-01-07 06:23:18

解决方案5
0 2016-01-07 06:25:17

解决方案6
0

解决方案7
0 2016-01-07 06:48:13

div瓷砖上的jQuery click事件不起作用

问题描述

7 个解决方案

解决方案1 2 已采纳 2016-01-07 06:52:04

解决方案2 0 2016-01-07 06:20:37

解决方案3 0 2016-01-07 06:22:19

解决方案4 0 2016-01-07 06:23:18

解决方案5 0 2016-01-07 06:25:17

解决方案6 0

解决方案7 0 2016-01-07 06:48:13

解决方案1
2 已采纳 2016-01-07 06:52:04

解决方案2
0 2016-01-07 06:20:37

解决方案3
0 2016-01-07 06:22:19

解决方案4
0 2016-01-07 06:23:18

解决方案5
0 2016-01-07 06:25:17

解决方案6
0

解决方案7
0 2016-01-07 06:48:13