Question

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

我创建了一个带有简单div的图块。我有四个div。每个div都有一个类＆＃34; tile。这4个div在一个外部更大的div中，但我猜这在这里无关紧要。我添加了一些查询代码，以确保当我点击一个磁贴时，一个新类＆＃34; activeTiles＆＃34;得到补充。在我的css文件中，tiles类具有背景颜色＆＃34; blue＆＃34;而activeTile类的背景颜色为＆＃34; cyan＆＃34;。所以我写的jquery代码添加了类＆＃34; activeTile＆＃34;这样瓷砖的颜色会发生变化。我正在使用＆＃34; mousedown＆＃34;事件。然而，我面临的问题是，即使在点击时添加了新类，但是在我将鼠标移出图块的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");
});
});

Answer 1

尝试

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

CSS

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

Answer 2

试试这个

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

Answer 3

试试这个

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

Answer 4

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

 async Task<string> Test()
        {
            try
            {
                var v = await TaskCaller();
                return v;
            }
            catch (Exception ee)
            {
                throw ee;
            }
        }

        async Task<string> TestTask()
        {
            string ty = string.Empty;
            Task<Task> task = new Task<Task>(async () =>
            {
                Thread.Sleep(2000);
                ty = "TestTask";
            });

            task.Start();
            task.Result.Wait();
            return ty;
        }

        async Task<string> TaskCaller()
        {
            string ty = string.Empty;
            Task<Task> task = new Task<Task>(async () =>
            {
                ty = await TestTask();
            });
            task.Start();
            task.Result.Wait();
            return ty;
        }

Answer 5

这是确切的点击事件..

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

Answer 6

试试这段代码......

<!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');
});

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

div div上的Jquery click事件不起作用

7 个答案: