2

我的选择器有问题。

其实我正在写一个小部件。

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

4

4 回答 4

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"));
        });
于 2013-10-10T06:19:44.923 回答
0

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

于 2013-10-10T06:24:04.657 回答
0

当初始化 jquery 并为两个类分配一个点击事件时，将同时绑定，意味着：

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

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

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

于 2013-10-10T06:20:20.240 回答
0

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

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

于 2013-10-10T06:27:05.060 回答