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>

那么为什么click事件总是使用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))，

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

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

Answer 3

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

Answer 4

感谢您的帮助。活动代表团工作：D

我的oppinio是，'''点击'做了同样的事情。

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

4 个答案: