функция Jquery не называется

Question

я функция JQuery, которая вызывает скрипт, некоторые данные из моей базы данных MySQL, функция JQuery называется, как показано ниже:

$(document).ready(function(){ 
    getTopFiveDeals(); 

Когда это работает он получает штраф данных и строит некоторые HTML и вставляет его в веб-страницу. Как показано ниже:

$('ul.special-list').append("<li><a href='#' class=restaurantItem restaurant= '" + item.estName + "' adddress='" + item.estAddr + "'><img src= " + item.img_link + 
     " width='60' height='60' alt='" + item.estName + "'><div class='img-det'><strong class='title'> " + item.title + " </strong><p> " + item.desc_short + 
     " <br>Expires: " + item.expiry_date + " </p><em class='price'>" + item.price + "</em></div></a><a href='dealDetail.html?id=" + item.id + 
     "' class='det-link'>Detail</a>"); 

Проблема начинается, когда у меня есть простая функция jquery ниже. Функция не вызывается вместо страницы загрузятся index.html #

$("a.restaurantItem").click(function (event) { 
    alert('Hello'); 
} 

Любая помощь и консультации или были бы оценены.

Большое спасибо

Answer 1

$("a.restaurantItem") называется один раз. Он не ищет новые элементы. Вы должны использовать синтаксис делегирования событий в .on(), чтобы соответствовать этим динамически создаваемые элементы:

$('ul.special-list').on('click', 'a.restaurantItem', function(e) { 
    e.preventDefault(); // To stop the link from redirecting the browser 
}); 

Answer 2

Вам нужны делегированные обработчики событий для dynanic элементов, а также для предотвращения действия по умолчанию на якорях (чтобы избежать прокруток к началу или после HREF)

$('ul.special-list').on('click', 'a.restaurantItem', function(event) { 
    event.preventDefault(); 
    alert('Hello'); 
}); 

Answer 3

использование .on() таким образом

$(document).on('click',"a.restaurantItem",function (event){ 
    event.preventDefault(); 
    alert('Hello'); 
});