I have a form. I include Dojo. Everything works fine. I use Dojo to change the class, values and attributes of input elements based on user input(sort of like validation).

The problem is, because of IE, I'm required to create a new input element(that I know of) if I want to change the 'type' of an input from 'text' to 'password'.

Once I create this element(which has all the same attributes and same id) as the element that it replaced, my Dojo functions such as ...

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");
    });

... no longer work on the newly created elements. I have run into this problem before and used to use jQuery and had a livequery plugin that reassigned the events to elements. Is there a plugin or native functionality for Dojo to do this that I'm unaware of?

I have a form. I include Dojo. Everything works fine. I use Dojo to change the class, values and attributes of input elements based on user input(sort of like validation).

The problem is, because of IE, I'm required to create a new input element(that I know of) if I want to change the 'type' of an input from 'text' to 'password'.

Once I create this element(which has all the same attributes and same id) as the element that it replaced, my Dojo functions such as ...

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");
    });

... no longer work on the newly created elements. I have run into this problem before and used to use jQuery and had a livequery plugin that reassigned the events to elements. Is there a plugin or native functionality for Dojo to do this that I'm unaware of?

• javascript
• dojo
• events
• element

3 Answers 3

Well it is pretty strange that the first result in Google is this answer and that it doesnt provide an up-to-date response.

Anyways, for those who need to attach an event to dynamically created elements, since dojo 1.7, event delegation can be used. A simple example would be:

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

I believe this code is pretty self-explanatory so I won't get into detail that much. However, there are some worthy notes on event delegation:

Note that event delegation will only work on events that bubble. Most DOM events do bubble, but there are a few exceptions. The mouseenter and mouseleave events do not bubble, but mouseover and mouseout are the bubbling counterparts. The focus and blur events do not bubble, but dojo/on normalizes focusin and focusout as bubbling equivalents. Also, scroll events don't bubble.

And ofcourse, do not forget to load the dojo/queryfirst...

Note that dojo/query must be loaded for event delegation to work.

Read more for further instructions... Hope that helps!

Firstly, wouldn't it be easier to create a few extra fields initially, and then just show/hide them depending on user's selection? Well, there isn't livequery in Dojo, but it isn't too difficult to bind event handlers to given ids instead of nodes using Dojo's connect. You just need to move up in the node hierarchy, catch all the events that bubble that far and filter the right node based on id. For example, if you had a form with the id login, you could:

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

Check out also jrburke's answer over here: Can dojo access the function assosiated with a HTML elements Event?

I believe Dojo behaviors are the mechanism you want to use. It will register a dojo.query selector with some associated action ("behavior"). It will keep track of changes to the DOM and re-apply the behavior to new matches.

This link should be helpful: http://dojocampus/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Also, you may want to consider using a class-based selection style instead of id-based. In my experience, removing then adding nodes to the DOM with the same id is problematic in some browsers.