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, о которой я не знаю?


javascript events element dojo
person Community    schedule 27.10.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Что ж, довольно странно, что первым результатом в Google является этот ответ, и он не дает актуального ответа.

В любом случае, для тех, кому нужно привязать событие к динамически создаваемым элементам, начиная с додзё 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/queryfirst...

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

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

person Savas Vedova    schedule 10.03.2015

arrow_upward
1
arrow_downward

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

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

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

person Maine    schedule 27.10.2009

arrow_upward
1
arrow_downward

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

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

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

person tommyjr    schedule 30.10.2009
comment
+1 Спасибо, что напомнили о dojo.behavior. Кажется, что он не отслеживает изменения, но вместо этого вам нужно вызвать apply() после обновления DOM. - person Maine; 31.10.2009