Jak zapobiec wielokrotnemu dołączaniu obsługi zdarzeń?

Question

Mam funkcję, która będzie zajmować obsługi click zdarzenia do mojego elementu:

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

Problem polega na tym, że gdy zgłoszę tej funkcji n click obsługi dołączyć do mojego elementu, więc kiedy nazywam go dwa razy , mam dwa alert gdy klikam na mój element:

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

Jak można temu zapobiec? I sprawdź, czy mój element ma już obsługę click?

Here is fiddle

Answer 1

Working jsFiddle Demo

Zastosowanie .each() metoda pętli swoimi elementami, i sprawdzić flagę już od obsługi zdarzeń z .data() metody, jeśli flaga jest true, pomiń bieżąca pętla. W przeciwnym razie dołącz procedurę obsługi zdarzeń do elementu i ustaw flagę jako true.

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'); 
     }); 
    }); 
} 

---

Referencje:

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

Answer 2

Coś blisko to wierzę:

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

Answer 3

Spróbuj

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

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

Demo: Fiddle

Innym sposobem

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