Передача кэш элемент JQuery к способу модификации

Question

Проблема Фидл:

Click To View (Попытка # 1, с использованием делегированных событий)

Click To View (Попытка # 2, перебор подход как ниже)

Click To View (Попытка №3, рефакторинга, имеет проблему, которую я пытаюсь решить)

В проекте, над которым я работаю, я изучаю довольно динамичную форму. В дополнение к некоторым статическим элементам существуют различные интерактивные элементы, которые могут быть клонированы из набора разметки скрытого «шаблона» и добавлены в разных точках бизнес-процесса.

Из-за динамического характера мой проверенный метод настройки кеша элемента jQuery и обработчиков событий при загрузке, а затем позволяет пользователю делать то, что не работает, из-за этой динамичной природы; Я обнаружил, что у моих динамически добавленных элементов не было событий щелчка.

Для решения этой проблемы вручную настроен метод повторной привязки для каждого рассматриваемого элемента. Процесс повторной обработки включает в себя: A) повторное получение набора элементов для заданного дескриптивного селектора, B) удаление любых существующих событий в этом кеше, поскольку эти события относятся к неполному набору элементов, а C) вызов метода привязки для применения нового события для всего набора.

грубой силы, работая так, что я получил, было это происходит:

var $elementCache = $('.some-class'); 

function rebindSomeLink() { 
    // Re-acquire the element cache... 
    $elementCache = $('.some-class'); 

    // Drop all existing events on the cache... 
    $elementCache.unbind(); 

    // Call a bind function to establish new events. 
    bindSomeLink(); 
} 

function bindSomeLink() { 
    $elementCache.click(function (e) { 
     // ...Behavior... 
    }); 
} 

// There are four other links with a similar rebind/bind function relationship set up. 

Естественно, я ухватился за пересвязывание повторяется так часто с почти точно таким же кодом - спелым для реорганизовать. У нас есть общая библиотека имен, где я добавил rebindEvents функцию ...

var MyCommon = function() { 
    var pub = {}; 

    pub.rebindEvents = function($elementCache, selector, bindFunction) { 
     $elementCache = $(selector); 
     $elementCache.unbind(); 
     bindFunction(); 
    }; 

    return pub; 
}(); 

При попытке вызова, что и запустить сайт, я сразу погасил свой палец на UncaughtTypeError: method click cannot be called on object undefined.

Как выясняется , кажется, когда я звоню следующее:

MyCommon.rebindEvents($elementCache, '.some-class', bindSomeLink); 

$elementCache не передается методу rebindEvents; когда я нахожу его в своем отладчике, $ elementCache внутри rebindEvents - undefined.

некоторые полезные исследования StackOverflow показали мне, что JavaScript не имеют ссылочный обгон, по крайней мере, в/C++/C смысле # C, что я знаком с, что приводит меня к двум моим Вопросам:

A) Возможно ли, чтобы я мог реорганизовать эту функциональность повторной привязки с помощью какого-то рода ссылки на кеш?

B) Если мне удастся реорганизовать мою функцию повторного воспроизведения в мое общее пространство имен, как бы я это сделал?

Answer 1

Использование Jquery On для привязки событий к элементу high-up в DOM, который всегда присутствует. http://api.jquery.com/on/

Это самый простой способ обработки привязки событий к динамически созданным элементам.

здесь jsfiddle, который показывает пример.

$('#temp').on('click', 'button', function(){ 
    alert('clicked'); 
}); 

$('#temp').append('<button>OK</button>'); 

Событие привязано к div, в результате которого динамически добавляется кнопка. Поскольку кнопка не имеет события кликов, событие «пузырится» по дереву DOM с его родительским элементом, у которого есть событие click для кнопки, поэтому оно обрабатывает его, а событие «пузыри» больше не происходит.