Question

我有一个类的方法如下：

add_file: function(name, id, is_new){
    // HTML: <div class="icon mime zip">name.zip <a>x</a></div>
    var components = name.split('.');
    var extension = components[components.length-1];
    this.container.innerHTML += "<div id='"+id+"' class='icon mime "+extension+"'>"+name+" <a id='remove-"+id+"' href='#remove'>x</a></div>";
    // Add event to a tag
        dojo.connect(dojo.byId('remove-'+id), 'onclick', function(ev){
            // here i am
        });
},

一切运作良好，直到我不止一次运行此方法。第一次正确注册事件，然后单击“x”将运行“here i am”功能。但是，一旦我添加了多个节点（是的，ID不同），事件就会注册到最后一个节点，但会从之前的节点中删除。

有效的我有这个：

<div id="field[photos]-filelist">
<div id="file1" class="icon mime jpg">file1.jpg <a id="remove-file1" href="#remove">x</a></div>
<div id="file2" class="icon mime jpg">file2.jpg <a id="remove-file2" href="#remove">x</a></div>
</div>

...并且删除链接仅适用于最后一个节点（在本例中为remove-file2）。

感谢您的任何提示/帮助！

Answer 1

问题是你正在使用innerHTML + =

这将采用现有的html，将其转换为纯标记，然后从标记中完全创建新节点。在此过程中，所有具有事件的节点都被替换为看起来完全相同但未连接到任何内容的节点。

正确的方法是使用dojo.place（newNodeOrHTML，refNode，positionString）

var myNewHTML = "<div id='"+id+"' class='icon mime "+extension+"'>"+name+" <a id='remove-"+id+"' href='#remove'>x</a></div>"

//This won't work as is breaks all the connections between nodes and events
this.container.innerHTML += myNewHTML;


//This will work because it uses proper dom manipulation techniques
dojo.place(myNewHTML, this.container, 'last');

Dojo事件：使用动态添加的DOM元素使其工作

1 个答案: