点击更改Div类需要多次点击才能工作

Change Div Class on click takes multiple clicks before it works

本文关键字：工作 Div      更新时间：2023-09-26

我使用了这个问题中的方法：更改div类onclick到另一个div，并更改回body单击

下面是我的jQuery函数：

jQuery('.checkbox_wrapper').on('click', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected'); 
});

然而，它似乎没有正常工作。在类更改之前需要多次单击。

查看我的jsfiddle：http://jsfiddle.net/7A3vw/

我认为这可能是一个冲突的javascript，所以我将其简化为最基本的内容，但即使使用单个函数，也需要多次单击才能真正更改类。因为生产环境中有一个隐藏的复选框，所以多次单击是不合理的。

有人能帮我找出这个问题的原因吗？

点击函数会触发两次，一次用于图像，一次为输入，因为两者都会冒泡到父元素，而触发两次会再次还原类（proof）。

只需以图像为目标，因为这是你真正想要点击的，而不是父图像：

jQuery('.deck_card img').on('click', function (e) {
    jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});

FIDDLE

i guest您需要将复选框与div的切换一起选中。

$(document).ready(function(e) {
    $('.checkbox_wrapper').on('click', function(e){ 
       var checked = $(this).find('input[type="checkbox"]').is(":checked");
       if(checked){
        jQuery(this).parent().addClass('selected').removeClass('not_selected');
       }else{
        jQuery(this).parent().addClass('not_selected').removeClass('selected');
       }                        
    });
});

您的代码触发了两次点击事件。因此使用.preventDefault()

这使得事件的默认操作不会被触发。

$('.checkbox_wrapper').on('click', function(e){
    $(this).parent()
    .toggleClass('not_selected')
    .toggleClass('selected');
    e.preventDefault();  // prevent the default action to be 
});                      // triggered for next time

检查此JSFiddle

尝试这个

jQuery(document).on("click",'.checkbox_wrapper', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected');
});

因为使用了类选择器，所以会触发多次单击。您需要使用not来排除额外的元素：

jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
    jQuery(this).parent()
    .toggleClass('not_selected selected')
});

这是一个FIDDLE。

相关文章：