1

一部のjQuery関数を正常に機能させるのに苦労しています。

私のサイトには、新しいアイテムが追加されるまで機能するいいねボタンがあり、その後機能しなくなります。これは、次のコードがあるときに機能しました。

$('.like').toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    }
);

友人がイベントのバブリングについて教えてくれましたが、なかなかうまくいきません。

これが私が現時点で持っているものです。

単純な HTML

​&lt;button href='123.html' rel='456.html' class='like'>Click here</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$(document).ready( でラップされた jQuery ... トグル機能を試してみましたが、最初のクリックでボタンがスリープしているように見えますが、突然起動してイベントを実行します。

$('body').click(function(event) {
    if ($(event.target).is('.like')) {
        var $like = $(event.target);
        $like.toggle(
            function() {
                console.log('href');
            }, function() {
                console.log('rel');
            }
        );
    }
});​

新しいアイテムが追加されたときに機能し続け、ボタンがこのように動作しないようにするために、コードはどのようなものにする必要がありますか

ここにフィドルがあります。

http://jsfiddle.net/_entreprenerd/SpmbQ/

4

4 に答える 4

2

問題を解決するには、デリゲートイベントハンドラーが必要です。

$('body').on('click', '.like', function() {
  $(this).toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    });
}).click();

見る.on()

あなたも持っていますdelegate()

$('body').delegate('.like', 'click', function() {
  $(this).toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    });
}).click();

注本体の代わりに、を保持するコンテナを使用できます.like。

于 2012-05-31T08:39:44.317 に答える
1

問題は、トグルはイベントではなく、jQuery の単なるメソッドであるため、「トグル」をデリゲートできないことです。そのため、委任されたイベントに対して独自のトグル機能を実装する必要があります。

サンプル ソリューション:

$("body").on("click", ".like", function () {
    var $this = $(this);
    var toggled= $this.data("toggled");
    if (toggled) {
        console.log('rel');
    } else {
        console.log('href');
    }
    $this.data("toggled", !toggled);
});

また、上記のコードのセレクターを「body」から .like 要素の親コンテナーに変更することをお勧めします。これにより、委譲はドキュメント ツリーの上位に近づきます。

サンプルのフィドル: http://jsfiddle.net/t2pXr/3/

于 2012-05-31T09:26:27.860 に答える
1

おそらく.on() (またはjQuery バージョン < 1.7 の場合は.delegate() ) を探しているでしょう。

于 2012-05-31T08:41:43.190 に答える
1

ajax 呼び出しが DOM に新しい要素を追加した後に、thecodeparadox による解決策またはイベントをフックします。しかし、thecodeparadox のソリューションの方が優れています。

于 2012-05-31T08:43:56.543 に答える