jQuery скрипт не работает

184

14 мая 2018, 00:50

Есть скрипт:

while ($result= mysqli_fetch_assoc($query)) {
    print '<div class="friendList-ask">
               <a class="btn-main" href="#">Done</a>
           </div>';
}

Данный HTML код попадает на страницу с помощью ajax:

$.ajax({
    url: 'search.php',
    success: function (data) {
            $('.userList').html(data);
            }
})

Проблема в том что после попадания данного кода на страницу, к нему не получается обратиться с помощью jQuery:

$(".friendList-ask .btn-main").on("click", function () {
    event.preventDefault();
    alert("Hello");
})

Тоесть данный код не работает. jQuery скрипт не находит его.

В чем же проблема? Как ее решить?

Answer 1

Это класическая тема, на момент выполения скрипта

$(".friendList-ask .btn-main").on("click", function () {

элемент .friendList-ask .btn-main не существует, событие привязать не к чему.

Нужно использовать всплытие событий и закрепить его на внешнем постоянном враппере над .friendList-ask или на document,вот так:

$(document).on("click", ".friendList-ask .btn-main", function(){ .....  })

Answer 2

Если событие на вновь созданном элементе, которого изначально не было - должна быть привязка к уже существующему элементу, который точно не изменится.

 $('#container_body').on('click', '.friendList-ask .btn-main', function(){
        event.preventDefault();
        alert("Hello");
    });

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

WordPress, таймер обратного отсчета T(-) Countdown

Как в таймере обратного отсчета T(-) Countdown для WordPress можно сделать, чтобы когда обратный отсчет подошел к нулю, то таймер каждый раз автоматически...

170

javascript