web-dev-qa-db-ja.com

jqueryは割り当てられた重複関数を防ぎます

クリック機能を動的に割り当てる必要がある場合、クリック機能が1回だけ割り当てられ、重複しないようにする方法はありますか？

this.click(function(){
    alert('test');
})
jqueryfunctiondynamicclick
25
Roger

クリックイベントを再度バインドする前にバインドを解除できます。そうすると、1つのイベントのみがアタッチされます。

//assuming this is a jquery object.
this.unbind("click");
this.click(function(){
  alert("clicked once");
});

JQuery 1.7以降、クリックで.on（ http://api.jquery.com/click/ ）が使用されるようになったため、正しいコードが

//assuming this is a jquery object.
this.off("click");
this.click(function(){
  alert("clicked once");
});

これにより、すべてのクリックイベント（使用している可能性のあるプラグインによって作成されたイベントを含む）のバインドが解除されます。イベントのバインドを解除するだけにするには、名前空間を使用します。 （ http://api.jquery.com/off/ ）

//assuming this is a jquery object.
this.off("click.myApp");
this.on("click.myApp", function(){
  alert("clicked once");
});

ここで、myAppは名前空間です。

44
Marius

JQueryを使用すると 。on（） 次のようなことができます。

//removes all binding to click for the namespace "myNamespace"
$(document).off('click.myNamespace'); 

$(document).on('click.myNamespace', '.selector', function(event) {...}); 

//this will be also removed (same namespace)
$(document).on('click.myNamespace', '.anotherSelector', function(event) {...});
15
sieppl

マリウスの答えに付け加えたいのですが-

重複するバインディングを回避するために、イベントにバインドされた関数が複数あると想定される場合に、誤って何かのバインドを解除したくないでしょう。これは、複数の開発者と一緒に何かに取り組んでいる場合に特に重要です。これを防ぐには、イベントの名前空間を使用できます。

//assuming this is a jquery object.
var alertEvent = 'click.alert'
this.unbind(alertEvent).bind(alertEvent,function(){
  alert('clicked once');
});

ここで、「alert」はクリックイベントの名前空間の名前であり、その名前空間にバインドされていた関数のみがバインド解除されます。

9
Muhd

要素がhtmlに追加されており、追加された要素に対してのみイベントを追加するとします。

function addEvents2Elements()//prevent Duplicate
{
    //this will add the event to all elements of class="ele2addevent"
    $('.ele2addevent').not('.clickbind').on('click',function(){alert('once');})

    //this will add a class an then the class="ele2addevent clickbind"
    $('.ele2addevent').not('.clickbind').addClass('.clickbind');
    //all elements of class="... clickbind" will not be catched anymore in the first line because of .not() every time you call this function
}
addEvents2Elements();

バインド後はclass = "ele2addevent clickbind"になり、再度キャッチされないため、class = "ele2addevent"でのみ追加することに注意してください。

0
Ricardo Figueiredo