错误选择器上的jQuery单击功能答案

【问题标题】：jQuery click function on wrong selector错误选择器上的jQuery单击功能
【发布时间】：2013-10-17 18:36:33
【问题描述】：

我的选择器有问题。

其实我在写一个小部件。

必须有 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 呢？

【问题讨论】：

标签： javascript jquery jquery-selectors click jquery-events

【解决方案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"));
        });

【讨论】：

【解决方案2】：

当初始化 jquery 并为两个类分配点击事件时，会同时绑定，意思是：

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

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

所以你必须再次点击新课程。按照 Barmar 的回答。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

感谢您的帮助。事件委托有效：D

我的意见是，“点击”和“点击”也是如此。

【讨论】：