jQuery Выбор не работает

Question

В моем документе HTML у меня есть таблица с пустым телом таблицы, которая автоматически заполняется jQuery, когда документ полностью загружен. Тело таблицы генерируется скриптом PHP, jQuery получает контент с помощью простого запроса GET.

Вот мой PHP код ...

<?php 

// ... 
// ... 
// Just take a look at the following two lines, 
// the other code is not important in this case. 
while ($tableDataRow = $tableData->fetch_assoc()) 
    echo '<tr><td>'. $tableDataRow['id']. '</td><td>'. $tableDataRow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tableDataRow['id']. '">Delete</a></td></tr>'; 

?> 

Выход может быть ...

<tr><td>1</td><td>Nadine</td><td><a href="#" class="delete-row" data-id="1">Delete</a></td></tr><tr><td>2</td><td>Nicole</td><td><a href="#" class="delete-row" data-id="2">Delete</a></td></tr> 

Все работает отлично, единственная проблема заключается в том, что Jquery не реагирует, если какой-либо событие щелчка имеет место. Мой JQuery код выглядит следующим образом ...

$(document).ready(function() { 
    $(".delete-row").click(function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?! 
     event.preventDefault(); 
     alert("You clicked on that link!") 
    }); 
}); 

Answer 1

.click() использует метод jQuery's bind(), который в основном принимает моментальный снимок DOM. В этом случае этот снимок будет сгенерирован на готовом документе.

Поскольку ваш PHP-код динамически добавляется на страницу, это не будет включено в готовый документ DOM-снимок. По этой причине, JQuery имеет on() метод, который может быть использован вместо:

$("table").on('click', '.delete-row', function() { ... }); 

Это известно как делегирование событий.

Answer 2

Использование делегация:

$(document).ready(function() { 
    $("#mytable").on("click",".delete-row",function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?! 
     event.preventDefault(); 
     alert("You clicked on that link!") 
    }); 
}); 

Answer 3

Событие является связывает в генерации страницы, но ваша таблица прилагается после, так что вы должны использовать что-то вроде «на» или какой-либо другой метод привязки события jQuery вместо «click»

Answer 4

Похоже, проблема связана с тем, что ваши элементы добавляются в DOM после загрузки страницы (через IE через запрос ajax), это будет означать, что $(".delete-row").click(function(event) {}); потерпит неудачу, поскольку элемент отсутствует при регистрации красным способом это использовать on.

$('.parentElement').on('click','.delete-row',function() { 
    event.preventDefault(); 
    alert("You clicked on that link!"); 
}); 

.parentElement бы элемент, который является родителем вашего AJAX добавил HTML, но не динамически добавлять себя.