передача параметра динамически создаваемым обработчикам

Question

Вот моя проблема. У меня есть функция, в которой я динамически создаю <input /> элементы, и я пытаюсь зарегистрировать обработчик на mouseclick с параметром. Я вызываю эту функцию несколько раз, и обработчику назначен только последний вход. Вот упрощенный код:

function create() {
    var div = document.getElementById("myId");
    var vRemove = document.createElement("span");
    vRemove.innerHTML = "remove";
    var foo = 4;
    vRemove.onclick = function(){ remove(foo); }
    div.innerHTML += " ";
    div.appendChild(vRemove);
}

function remove(id) {
    alert(id);    
}

create();
create();
create();

и в HTML у меня есть только один div:

<div id='myId'></div>

Когда я нажимаю на 3-й элемент, появляется предупреждение, но остальные два ничего не делают. Что я делаю не так?

Answer 1

Эта строка кода, с которой вы теперь уточнили свой ответ:

div.innerHTML += " ";

стирает все предыдущие программные обработчики событий, назначенные дочерним элементам myId, поэтому остается только один добавленный последний - таким образом, почему, таким образом, работает только последний обработчик ввода. Назначение innerHTML повторяет HTML с нуля и повторно инициализирует все эти объекты. Любые программные изменения, внесенные вами (в вашем случае, назначьте обработчик кликов), могут быть потеряны.

Недостатком использования innerHTML для изменения вашей страницы является то, что она может разрушить программно назначенные обработчики событий и другие программные изменения. Я пытаюсь использовать его только при создании нового HTML или при настройке содержимого одного элемента (например, что отображает текст).

Answer 2

Вы пытались дать разные идентификаторы для нового, который вы создали?

Answer 3

Я считаю, что это проблема с областью действия.

Вы получаете доступ к закрытой переменной внутри анонимной функции.

Попробуйте использовать закрытие для вашего события.

http://www.google.com/search?client=safari&rls=en&q=javascript+closures&ie=UTF-8&oe=UTF-8