Jquery function not called - php

Question

I have jquery function that calls a php script some data from my mysql database, the jquery function is called as below :
$(document).ready(function(){
getTopFiveDeals();
When this runs it gets the data fine and builds some HTML and inserts it into the webpage. As shown below:
$('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>");
The problem starts when i have a simple jquery function below. The function is not called instead the page reloads to index.html#
$("a.restaurantItem").click(function (event) {
alert('Hello');
}
Any help and or advice would be much appreciated.
Many Thanks

Answer 1

$("a.restaurantItem") is called once. It doesn't look for new elements. You need to use the event delegation syntax of .on() to match those dynamically created elements:
$('ul.special-list').on('click', 'a.restaurantItem', function(e) {
e.preventDefault(); // To stop the link from redirecting the browser
});

Answer 2

You'll need delegated event handlers for dynanic elements, and to prevent the default action on anchors (to avoid scrolling to top or following the href)
$('ul.special-list').on('click', 'a.restaurantItem', function(event) {
event.preventDefault();
alert('Hello');
});

Answer 3

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