php - 未调用 Jquery 函数

Question

我有 jquery 函数，它调用 php 脚本从我的 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

您将需要动态元素的委托事件处理程序，并防止锚点上的默认操作（以避免滚动到顶部或跟随 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');
});