2

jqueryのliveメソッドとdieメソッドに問題があります。

http://jsfiddle.net/fC5Nr/4/

//bind above function to clicking a
$('a').live('click', functionThatWaitsFiveSeconds)

リンクをクリックするためにイベントハンドラーをアタッチする必要があります-関数の実行中にハンドラーのバインドを解除して、関数が完了する前に何度も実行されないようにします（関数はajax要求を実行してから応答を処理します）。

私は上記のすべてをうまく行うことができます。

ただし、上記のハンドラーは（a）タグに付加されているため、（リンクがたどられないようにするために）falseを返す必要があります。これを行うには、クリックを処理してfalseを返すように別の関数をバインドする必要があります。

単純な（falseを返す）バインドを常に維持しながら、複雑な関数のバインドを解除する方法を知る必要があります。

上記のフィドルは機能するはずですが、イベントハンドラーのバインドを解除した後、再度バインドされませんか？名前空間などのいくつかの組み合わせを試しましたが、これをまとめることができません。

4

3 に答える 3

2

アップデートで動作しました

   function denyRest() {
        $("body").append("<h1>return false</h1>");
        return false;
    }
    function functionThatWaitsFiveSeconds() {
        $('a').die('click.thing', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
        $('#content').append(loader);
        loader.animate({
            'width': '500'
        }, 5000, function() {
            loader.remove();
            $('a').die('click.otherthing', denyRest).live('click.thing', functionThatWaitsFiveSeconds).live('click.otherthing', denyRest);
        });
    }

    $('a').live('click.thing', functionThatWaitsFiveSeconds);
    $('a').live('click.otherthing', denyRest);

フィドルを更新しました。

問題はこれだったと思います。

  1. ライブを使用してハンドラーを接続し、5秒間待機します
  2. liveを使用して、イベントを停止するためにfalseを返すハンドラーをアタッチします。
  3. アンカータグをクリックします。これにより、5秒待機ハンドラーが削除されます。
  4. この時点でのアンカータグへのクリックは、returnfalseステートメントによって停止されます。
  5. 現在、 returnfalseステートメントが最初です。5秒待機ハンドラーを再バインドすると、実行される2番目の場所になりますが、falseハンドラーを返すことによって拒否されます。
  6. これを修正して、両方のハンドラーをゴミ箱に移動し、正しい順序で再バインドしました。
于 2011-03-03T14:43:23.747 に答える
1

このアプローチ（マーカークラスを使用）を気にしない場合は、これがあなたが探しているものかもしれません。イベントの厄介なバインドとバインド解除はありません-質問に答える方法を見つけようとしているときに、ページでバインド/バインド解除されたすべてのものを追跡するのは非常に面倒であることがわかり、複数のローダーがある段階に達しましたシングルクリックで表示されます。

$(document).ready(function(){
    function functionThatWaitsFiveSeconds(el, e){
        //stop default link click events
        e.preventDefault();
        e.stopPropagation();

        if($(el).hasClass('loadingMarkerClass')) {
           return false; //we're currently processing this element already
       }
        $(el).addClass('loadingMarkerClass'); //add a dummy, marker class to indicate we're showing a loader for this element

        var loader = $('<div class="loader">Loading: ' + $(el).html() + '</div>');
        $('#content').append(loader);
        loader.animate({'width': '500'}, 5000, function(){
            loader.remove();
            $(el).removeClass('loadingMarkerClass');
        });
    }

    //bind above function to clicking a
    $('a').live('click', function(e){functionThatWaitsFiveSeconds(this, e)});

});
于 2011-03-03T14:46:53.407 に答える
0

実際、これを実現する最も簡単な方法は、アンカーリンクのhrefタグを削除することです。

したがって、コードは次のようになります

$(document).ready(function(){

    function functionThatWaitsFiveSeconds(){
       // $('a').die('click', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
         $(this).attr("href","#");
            $('#content').append(loader)
            loader.animate({'width': '500'}, 5000, function(){
                loader.remove();
                //now rebind click handler
         //       $('a').live('click', functionThatWaitsFiveSeconds)
            })
    }



    //bind above function to clicking a
    $('a').live('click', functionThatWaitsFiveSeconds)

    //need to return false at all times to prevent folowing link
    $('a').live('click',function(){
        return false;    
    })
})
于 2011-03-03T14:48:12.197 に答える