Предотвращение дублирования привязки с использованием пространства имен события jQuery
На самом деле есть несколько разных способов предотвращения дублирования. Один из них - просто передать оригинальный обработчик в unbind, НО, если это копия, а не в том же пространстве в памяти, которую он не будет отменять, другой популярный способ (с использованием пространств имен) - более верный способ достижения этого.
Это общая проблема с событиями. Поэтому я немного объясню события jQuery и использование пространства имен для предотвращения дублирования привязок.
ОТВЕТ: (Короткий и прямой к точке)
// bind handler normally
$('#myElement').bind('myEvent', myMainHandler);
// bind another using namespace
$('#myElement').bind('myEvent.myNamespace', myUniqueHandler);
// unbind the unique and rebind the unique
$('#myElement').unbind('myEvent.myNamespace').bind('myEvent.myNamespace', myUniqueHandler);
$('#myElement').bind('myEvent.myNamespace', myUniqueHandler);
// trigger event
$('#myElement').trigger('myEvent');
// output
myMainHandler() // fires once!
myUniqueHandler() // fires once!
ПРИМЕР ОТВЕТА: (Полное подробное объяснение)
Сначала давайте создадим пример элемента для привязки. Мы будем использовать кнопку с идентификатором #button. Затем создайте 3 функции, которые могут и будут использоваться в качестве обработчиков для привязки к событию:
функция exampleOne () мы будем связывать одним кликом.
функцию exampleTwo () мы будем привязывать к пространству имен клика.
Функция exampleThree () мы будем привязывать к пространству имен щелчка, но отменять привязку и привязывать несколько раз, не удаляя другие привязки, что предотвращает дублирование привязки, не удаляя при этом другие связанные методы.
Пример запуска: (Создать элемент для привязки и некоторые методы для наших обработчиков)
<button id="button">click me!</button>
// create the example methods for our handlers
function exampleOne(){ alert('One fired!'); }
function exampleTwo(){ alert('Two fired!'); }
function exampleThree(){ alert('Three fired!'); }
Привязать примерНажмите, чтобы нажать:
$('#button').bind('click', exampleOne); // bind example one to "click"
Теперь, если пользователь нажимает кнопку или вызывает $ ('кнопка #)'. Trigger ('click'), вы получите предупреждение "One Fired!";
Привязать пример два к пространству имен щелчка:"имя произвольно, мы будем использовать myNamespace2"
$('#button').bind('click.myNamespace2', exampleTwo);
Крутая вещь в этом состоит в том, что мы можем вызвать «щелчок», который будет запускать exampleOne () И exampleTwo (), или мы можем вызвать «click.myNamespace2», который будет запускать только exampleTwo ()
Привязать exampleThree к пространству имен click:"снова, имя произвольно, если оно отличается от пространства имен exampleTwo, мы будем использовать myNamespace3"
$('#button').bind('click.myNamespace3', exampleThree);
Теперь, если сработает 'click' get, ВСЕ три примера метода будут запущены, или мы сможем нацелиться на определенное пространство имен.
ВСЕ ВМЕСТЕ, ЧТОБЫ ПРЕДОТВРАТИТЬ ДУБЛИКАТ
Если бы мы продолжали связывать exampleThree () примерно так:
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);
Они будут запущены три раза, потому что каждый раз, когда вы вызываете bind, вы добавляете его в массив событий. Итак, действительно просто. Просто отсоедините это пространство имен перед привязкой, вот так:
$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);
Если активирована функция щелчка, exampleOne (), exampleTwo () и exampleThree () запускаются только один раз.
Чтобы обернуть все это в простую функцию:
var myClickBinding = function(jqEle, handler, namespace){
if(namespace == undefined){
jqEle.bind('click', handler);
}else{
jqEle.unbind('click.'+namespace).bind('click.'+namespace, handler);
}
}
Резюме:
Пространства имен событий jQuery допускают привязку к основному событию, но также позволяют создавать и очищать дочерние пространства имен, не затрагивая родственные или родительские пространства имен, что с минимальным творческим мышлением позволяет предотвращать дублирование привязок.
Для дальнейшего объяснения: http://api.jquery.com/event.namespace/