Dojo将事件附加到动态创建的元素

Question

我有一个表格。 我包括道场。 一切正常。 我使用Dojo根据用户输入（类似验证）来更改输入元素的类，值和属性。

问题是，由于IE，如果我想将输入的“类型”从“文本”更改为“密码”，则需要创建一个新的输入元素（我知道）。

一旦创建了与其替换的元素相同的元素（具有相同的属性和相同的ID），我的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

很奇怪，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才能使事件委托起作用。

阅读更多以获取更多说明...希望能有所帮助！

Answer 2

首先，首先创建一些额外的字段，然后根据用户的选择显示/隐藏它们会更容易吗？ 好吧，Dojo中没有livequery ，但是将事件处理程序绑定到给定的ID而不是使用Dojo的connect绑定节点并不是太困难。 您只需要在节点层次结构中上移，捕获所有冒泡的事件并根据id筛选正确的节点即可。 例如，如果您有一个ID为login的表单，则可以：

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

还可以在这里查看jrburke的答案： dojo可以访问与HTML元素Event相关联的函数吗？

Answer 3

我相信Dojo行为是您要使用的机制。 它将注册一个dojo.query选择器以及一些相关的动作（“行为”）。 它将跟踪DOM的更改，并将行为重新应用于新匹配项。

该链接应该是有用的： http : //dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

另外，您可能要考虑使用基于类的选择样式而不是基于id的选择样式。 以我的经验，在某些浏览器中，删除然后再将具有相同id的节点添加到DOM是有问题的。