2

セレクターに問題があります。

実際、私はウィジェットを書いています。

クラスを変更するには、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-active ではなく ui-multiselect-costum-button を使用するのでしょうか?

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

jqueryを初期化して両方のクラスにクリックイベントを割り当てると、同時にバインドされます。つまり、次のことを意味します。

にクリックイベントを割り当て$(".ui-multiselect-costum-button",$(this))、

その後、(".ui-multiselect-costum-button-active",$(this))最初のクラスをクリックする必要があるまで存在しないクリックイベントを割り当てます$(".ui-multiselect-costum-button",$(this))（その関数ではクラス名が-activeに変更されます）が、新しいクラス名のクリックイベントは存在しません。

そのため、新しいクラスに再度クリックする必要があります。Barmarの答えに従ってください。

于 2013-10-10T06:20:20.240 に答える