Dojo attach event to dynamically created element

Question

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 funtions 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?

Answer 1

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?

Answer 2

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.org/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.