j查询错误选择器上的点击功能

Question

我的选择器有问题。

实际上我正在编写一个小部件。

必须有 2 个单击事件才能更改类。问题是，如果我单击第一个事件，类将更改。但是在第二次点击时，它总是转到相同的点击事件，即使它有错误的类(选择器(

            $(".ui-multiselect-costum-button",$(this)).click(function(){
                console.log($(this).parent().html());
                console.log($(this).attr("class"));
                $(this).removeClass("ui-multiselect-costum-button").addClass("ui-multiselect-costum-button-active");
                console.log($(this).attr("class"));
                console.log($(this).parent().html());
            });
            $(".ui-multiselect-costum-button-active",$(this)).click(function(){
                console.log($(this).attr("class"));
                $(this).removeClass("ui-multiselect-costum-button-active").addClass("ui-multiselect-costum-button");
                console.log($(this).attr("class"));
            });

控制台显示以下内容：

 <input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button"></span>
 ui-multiselect-costum-button
 ui-multiselect-costum-button-active
 <input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span>
 <input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span>
 ui-multiselect-costum-button-active
 ui-multiselect-costum-button-active
 <input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span> 

那么，为什么点击事件总是使用 ui-multiselect-costum-button，而不是 ui-multiselect-costum-button-active？

Answer 1

在初始化插件时，您将处理程序绑定到具有类的元素。您需要使用事件委派，以便它遵循动态类更改：

        $(this).on("click", ".ui-multiselect-costum-button", function(){
            console.log($(this).parent().html());
            console.log($(this).attr("class"));
            $(this).removeClass("ui-multiselect-costum-button").addClass("ui-multiselect-costum-button-active");
            console.log($(this).attr("class"));
            console.log($(this).parent().html());
        });
        $(this).on("click", ".ui-multiselect-costum-button-active", function(){
            console.log($(this).attr("class"));
            $(this).removeClass("ui-multiselect-costum-button-active").addClass("ui-multiselect-costum-button");
            console.log($(this).attr("class"));
        });

Answer 2

当 init jquery 并为两个类分配一个 click 事件时，将同时绑定，表示：

将点击事件分配给$(".ui-multiselect-costum-button",$(this))，

之后，将 Click 事件(".ui-multiselect-costum-button-active",$(this))该事件该事件不存在，

直到您必须单击第一个类$(".ui-multiselect-costum-button",$(this))(在该函数中会将类名更改为 -active(，但新类名的单击事件不存在。

所以你必须再次点击到新类。 按照巴马尔的回答。

Answer 3

尝试使用 on 而不是单击。您的事件在文档加载到相应元素时绑定到元素。您正在更改事件中元素的类，但事件已在文档加载时绑定到这些元素，当您使用 click 时，在更改类时不会再次绑定事件。

Answer 4

感谢您的帮助。活动委派工作:D

我的反对意见是，"在"上"一个"点击"也做了同样的事情。