Olay işleyicisini birden çok kez nasıl ekleyebiliriz?

Question

benim elemana click olay işleyicisi ekler bir işlevi vardır:

function attachClickToElem() { 
    $('.elem').on('click', function() { 
     alert('Hello World'); 
    }); 
} 

sorun bu işlevi çağırmak zaman Onu iki kez çağırdığınızda , n click işleyicisi yüzden, benim elemana takmak olmasıdır

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

bunu nasıl engelleyebilirim: Ben elemanı tıkladığınızda, iki tane alert olsun? Ve elemanımın zaten click işleyicisine sahip olup olmadığını kontrol et. bayrak true ise

Here is fiddle

Answer 1

Working jsFiddle Demo senin elemanları, döngü

Kullanım .each() yöntemi ve, .data() yöntemle zaten olay işleyicileri için bayrağı kontrol atlamak mevcut döngü. Aksi takdirde, olay işleyicisini elemanına takın ve bayrağı true olarak ayarlayın.

function attachClickToElem() { 
    $('.elem').each(function() { 
     var $elem = $(this); 

     // check if event handler already exists 
     // if exists, skip this item and go to next item 
     if ($elem.data('click-init')) { 
      return true; 
     } 

     // flag item to prevent attaching handler again 
     $elem.data('click-init', true); 

     $elem.on('click', function() { 
      alert('Hello World'); 
     }); 
    }); 
} 

---

Referanslar:

• .each() - jQuery API Belgeleri
• .data() - jQuery API Belgeleri

Answer 2

bu yakın bir şey inanıyorum:

function attachClickToElem() { 
    $('.elem:not(.has-click-handler)') 
     .addClass('has-click-handler') 
     .on('click', function() { 
      alert('Hello World'); 
    }); 
} 

Answer 3

function attachClickToElem() { 
    $('.elem').off('click.mytest').on('click.mytest', function() { 
     alert('Hello World'); 
    }); 
} 

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

Demo deneyin: Fiddle

bir başka yolu

function attachClickToElem() { 
    $('.elem').filter(function(){ 
     return !$(this).data('myclick-handler'); 
    }).on('click.mytest', function() { 
     alert('Hello World'); 
    }).data('myclick-handler', true); 
} 

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

Demo: Fiddle