События Dojo: заставить его работать с динамически добавленными элементами DOM - PullRequest
Новая
       23

События Dojo: заставить его работать с динамически добавленными элементами DOM

0 голосов
/ 15 апреля 2011

У меня есть метод класса следующим образом: 

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» запустит функцию «здесь я».Однако, как только я добавлю более одного узла (и да, идентификатор будет другим), событие будет зарегистрировано на последнем узле, но удалено из всех предыдущих.

В действительности у меня есть это: 

<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).

Спасибо за любые советы / помощь!

1 Ответ

1 голос
/ 15 апреля 2011

Проблема в том, что вы используете 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');
...