Dojo прикрепить событие к динамически созданному элементу - PullRequest
Новая
       16

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

1 голос
/ 27 октября 2009

У меня есть форма. Я включаю Додзе. Все отлично работает Я использую 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, чтобы я не знал об этом?

Ответы [ 3 ]

4 голосов
/ 10 марта 2015

Что ж, довольно странно, что первым результатом в 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 / query.

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

1 голос
/ 30 октября 2009

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

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

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

1 голос
/ 27 октября 2009

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

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

Проверьте также ответ jrburke здесь: Может ли dojo получить доступ к функции, связанной с событием HTML-элементов?

...