2009-03-10 13 views
20

内.clickイベントを上書き:jQueryの私は、これらの機能を持ってクリック

TargetWorksheet.toggle_child_locations = function(id){ 
    $("#location-children-"+id).slideToggle("slow"); 
} 

TargetWorksheet.get_child_locations = function(id, lvl){ 
    //Ajax grab all children and targets, and display children 
    $.get('child_locations',{ location_id: id, level: lvl}, function(data){ 
    $("#location-children-"+id).append(data); 
    TargetWorksheet.toggle_child_locations(id); 
    }); 

    //Change onClick to just toggle since child data will now be loaded 
    $("#location-toggle-"+id).click(function(){ 
    TargetWorksheet.toggle_child_locations(id); 
    }); 
} 

と、このコール:

$(function(){ 
    TargetWorksheet.toggle_child_locations(2); 
    $("#location-toggle-2").click(function(){ 
    TargetWorksheet.get_child_locations(2,1); 
    }); 
}); 

だから私は私の '+' リンク(#場所-トグルにクリックイベントを添付-2)、子データをトグルします。最初のクリックでは、子データを取得するためにajax呼び出しを行いたいが、次に#location-toggle-2の.clickを上書きして、単にトグルして、ajax呼び出しを行わないようにしたい。上記のコードは動作せず、.clickを上書きしないように見え、毎回ajax呼び出しを行います。

アイテムの.clickイベントをどのように上書きできるか知っていますか?私も試しました $("#location-toggle-"+id).click(TargetWorksheet.toggle_child_locations(id)); そして何らかの理由で再帰的に何度もトグルしていました。

思考?

答えて

62

あなたは.click()を使用すると、新しいハンドラが呼び出されますたびにを追加することがあり欠けている唯一のものは、既存のものを上書きしません。

$("#location-toggle-"+id).unbind()を使用すると、新しい要素を追加する前にその要素のハンドラを消去することができ、期待どおりに機能するはずです。

+8

'unbind(" click ");'を使うほうがよいでしょう。これは 'click'イベントタイプのみをアンバインドします。これは、 'button()'のようなJQueryUIウィジェットを使用する場合に特に便利です。この場合は、クリックを解除し、 'hover'のような他のイベントを保持したいだけです。 –

+5

連鎖について忘れないでください。私は通常これを行います: '$("#myElement ")。off(" click ")on(" click "、handler);'これはコードを少しきれいにします – Nick

関連する問題