3

ドロップダウンメニューがあり、アイコンをクリックすると「Open」クラスが親に追加され、メニューのどこかをクリックすると閉じます。ただし、アイコンがクリックされると、バインド内の関数が起動します。その結果、クラス Open が追加され、すぐに削除されます。

これはおそらく単純な問題ですが、「クリック」イベントがすぐに発生する理由がわかりません!?

この質問は似ているかもしれませんが、まだ解決できません: jQuery bind event fireing the event

$(function () {

    $(".ui-dropdown-action").bind("click", function () {
        $(this).parent()
            .addClass("Open")
            .bind("click", function () {
                $(this).removeClass("Open");
            });
    });

});
4

4 に答える 4

8

DOM ツリーをバブリングするクリック イベントに問題がある可能性があると思います。これが、親でもクリックが発生する理由です。

イベントオブジェクトを最初のバインドの引数として渡し、event.stopPropagation()次のように呼び出す場合

$(function () {

  $(".ui-dropdown-action").bind("click", function (event) {
    event.stopPropagation();
    $(this).parent()
        .addClass("Open")
        .bind("click", function () {
            $(this).removeClass("Open");
        });
  });

});

問題を解決する必要があります。

于 2012-09-23T22:14:43.053 に答える
0

イベント引数を渡して、イベントのバブリングを止めることができます..これを試してください

$(function () {

        $(".ui-dropdown-action").bind("click", function () {
            $(this).parent()
                .addClass("Open")
                .unbind().bind("click", function (e) {
                    $(this).removeClass("Open");
                    e.stopPropagation();
                });
        });

    });

これにより、アイコンがクリックされたときに親イベントが発生しないようになります。また、アイコンをクリックするたびに、親のイベントが再度バインドされ、複数のクリック イベントが作成されます。バインドを解除してバインドする必要があります。それを避けるためにもう一度..

于 2012-09-23T22:14:54.597 に答える
0

クリックイベントが親にバブリングしてからそのセレクターを起動しているため、すぐに起動しています。これを修正するには、2 番目のバインドで setTimeout() を使用します。

$(function () {
  $(".ui-dropdown-action").bind("click", function () {
    var parent = $(this).parent();
    parent.addClass("Open");
    setTimeout(function() {
      parent.bind("click", function () {
        $(this).removeClass("Open");
      });
    }, 0);
  });
});

もう 1 つのオプションは、最初のバインドのイベントで stopPropagation() を実行することですが、これにより、他のハンドラーがそのイベントでトリガーされなくなります。

于 2012-09-23T22:16:08.557 に答える