События щелчка тега привязки не работают после отображения данных с использованием ajax
Когда я перезагружаю страницу, я вызываю ajax, чтобы получить данные и отобразить их на экране.
<div class = "empList"><ul></ul></div>
<script>
$(document).ready(function() {
$.ajax({
url: 'process.php',
method: 'post',
dataType: "json",
data: {
action: "employeelist"
},
success: function(data) {
var trHTML = '';
$.each(data, function(i, item) {
trHTML += '<li><div class = "employeeShareWrap"><a href = "javascript:void(0);" class = "shareSocial" data-id = "' + item.id + '">Share</a></div></li>';
});
$('.empList ul').append(trHTML);
}
})
});
//clicking on the share button
$(".employeeShareWrap>a").click(function(e) {
e.preventDefault();
console.info('hi');
alert("hello");
});
// this is the second way i tried
/*
$(".employeeShareWrap>a").click(function(){
var otherInput=$(this).data("id");
alert(otherInput);
alert("hello");
});*/
<script>
На данный момент я показываю кнопку «Поделиться» для целей тестирования. Теперь моя проблема заключается в том, что когда я нажимаю кнопку «Поделиться», я не получаю никаких предупреждений. В консоли нет ошибки.
И если я добавил прямо в HTML, то это работает.
<li><div class = "employeeShareWrap"><a href = "javascript:void(0);" class = "shareSocial" data-id = "51">Share</a></div></li>
<script type = "text/javascript">
$(".employeeShareWrap>a").click(function(e){
e.preventDefault();
console.info('hi');
alert("hellow");
});
</script>
Что-то не так с моим скриптом или я неправильно его отображаю?
Спасибо, что поделились справочной ссылкой. Буду обращаться в будущем.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это связано с тем, что тег привязки еще не был создан к тому времени, когда вы пытаетесь прикрепить к нему слушателя. Вместо этого рассмотрите возможность использования метода on:
$(document).on('click', '.employeeShareWrap > a', function(e){
e.preventDefault();
console.info('hi');
alert("hellow");
});
Ой! Спасибо за информацию. Да, работает отлично. Еще одна вещь. Я добавил второй способ в вопросе. Это лучший способ?
Если ваш тег привязки не визуализируется динамически с помощью JS и является статическим, рекомендуется использовать второй способ.
Обратите внимание, что существует несколько подписей on(), и в этой используется селектор делегирования. on() сама по себе не обязательно решает проблему
Аналогичный вопрос: stackoverflow.com/questions/9610267/…