javascript - 错误选择器上的 jQuery 单击函数

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

您在初始化插件时将处理程序绑定(bind)到具有类的元素。您需要使用事件委托(delegate)，以便它会跟随动态类更改:

        $(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"));
        });