Ненавязчивое событие JavaScript на автоматически сгенерированных элементах - PullRequest
Новая
       26

Ненавязчивое событие JavaScript на автоматически сгенерированных элементах

1 голос
/ 22 марта 2012

У меня есть этот код PHP в цикле для каждого сообщения на странице администратора блога: 

echo '<a class="delete_link" id="delete_link_'.$row['rowid'].'">Delete</a>';

Таким образом, он выводит: 

<a class="delete_link" id="delete_link_1">Delete</a>
<a class="delete_link" id="delete_link_2">Delete</a>
<a class="delete_link" id="delete_link_3">Delete</a>

и так далее ...

Нажав на эти ссылки, я бы хотел, чтобы браузер отправил запрос DELETE через XHR, но я не знаю , как настроить события ненавязчивым образом .Мой пример не работает, так как sendDeleteRequest() запускается с последним добавленным идентификатором, независимо от того, по какой ссылке я нажимаю: 

function sendDeleteRequest(id) {
    // I only put a simple alert in this function for now.
    alert("Id of firing element: " + id);
}

onload = function() {
    var deleteLinks = document.getElementsByClassName("delete_link");
    for (var node in deleteLinks) {
        deleteLinks[node].onclick = function() {
            sendDeleteRequest(deleteLinks[node].getAttribute("id"));
        }
    }
}

Что не так с этим кодом?На что еще мне стоит обратить внимание?Я попробовал то же самое с addEventListener(), но безуспешно.Я все еще использую XHTML 1.0 и не могу использовать jQuery в этом проекте.

1 Ответ

2 голосов
/ 22 марта 2012

Вы можете использовать что-то вроде этого: 

var deleteLinks = document.getElementsByClassName("delete_link");
for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].onclick = function() {
        sendDeleteRequest(this.id);
    }
}

Обратите внимание, не стоит итерировать массив с for (node in deleteLinks), потому что он будет включать перечисляемые свойства в итерации в дополнение к элементам массива.Этот тип итерации следует использовать только для итерации всех свойств объекта.

Основное изменение, которое я сделал в вашем коде, заключалось в использовании ссылки на this для получения значения id, на которое нажали.Ваш способ сделать это вызвал проблемы, потому что цикл for и значение node уже выполнились до завершения, когда щелчок произошел некоторое время спустя, поэтому значение node оказалось не таким, как вы хотели.

...