Dojo присоединить событие к динамически созданному элементу

Question

У меня есть форму. Я включаю Dojo. Все работает нормально. Я использую Dojo для изменения класса, значений и атрибутов входных элементов на основе ввода пользователем (вроде проверки).

Проблема в том, что из-за IE я должен создать новый элемент ввода (который я знаю), если я хочу изменить «тип» ввода с «текст» на «пароль».

После того, как я создаю этот элемент (который имеет все те же атрибуты и тот же идентификатор) в качестве элемента, что замененные, мои Dojo функции, такие как ...

dojo.query("#password2") 
    .connect("onclick",function(){ 
     // if password2 is equal to the default text 
     if(this.value == "Confirm your password"){ 
      this.value = ""; 
      UpdateType(this); // this is the function that dynamically creates the new input element to have a type of 'password' 
     } 
     dojo.query("#list_password2").removeClass("error"); 
    }); 

... больше не работают на вновь созданных элементов. Я столкнулся с этой проблемой раньше и использовал для использования jQuery и имел плагин livequery, который переназначал события для элементов. Есть ли плагин или встроенная функциональность для Dojo для этого, о чем я не знаю?

Answer 1

Во-первых, не было бы легче создать несколько дополнительных полей изначально, а затем просто показать/скрыть их в зависимости от выбора пользователя? Ну, в Dojo нет livequery, но не сложно связать обработчики событий с заданными идентификаторами вместо узлов, используя Dojo's connect. Вам просто нужно переместиться вверх по иерархии узлов, уловить все события, которые пузырятся так далеко, и фильтровать правый узел на основе id. Например, если вы имели форму с идентификатором login, вы можете:

dojo.query('#login').connect('click', function(evt) { 
    console.log(evt); 
    if(evt.target.id == 'password2') { 
     console.log('success'); 
    } 
}); 

Заканчивать также jrburke Ответят здесь: Can dojo access the function assosiated with a HTML elements Event?

Answer 2

Я считаю Dojo поведение является механизмом, который вы хотите использовать. Он зарегистрирует селектор dojo.query с некоторым связанным действием («поведение»). Он будет отслеживать изменения в DOM и повторно применять поведение к новым совпадениям.

Эта ссылка должна быть полезной: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Кроме того, вы можете рассмотреть вопрос об использовании стиля выбора класса на основе вместо Ид основе. По моему опыту, удаление некоторых узлов в DOM с одинаковым идентификатором является проблематичным в некоторых браузерах.

Answer 3

Ну, это довольно странно, что первый результат в Google - это ответ и что он не дает обновленного ответа.

В любом случае, для тех, кому необходимо присоединить событие к динамически созданным элементам, так как dojo 1.7 можно использовать делегирование событий. Простой пример был бы:

require(["dojo/on", "dojo/query"], function(on) { 
    on(parentElement, '.child-selector:click', function(e) { 
     alert('clicked'); 
    }); 
}); 

Я считаю, что этот код довольно понятно, поэтому я не буду вдаваться в детали, что многое. Тем не менее, есть несколько достойных заметок в деле делегирования:

Обратите внимание, что делегирование событий будет работать только на события, которые пузырятся. Большинство DOM-события действительно пузырятся, но есть несколько исключений. mouseenter и mouseleave события не пузырятся, но mouseover и mouseout являются пузырящимися аналогами. События focus и blur не пузыриваются, , но dojo/on нормализует focusin и focusout как эквиваленты барботирования. Также, scroll события не пузыри.

И конечно, не забудьте загрузить dojo/query первый ...

Обратите внимание, что Dojo/запрос должен быть загружен для делегирования событий для работы.

Read more для дальнейших инструкций ... Надеюсь, что это поможет!