没有调用Jquery函数(Jquery function not called)

没有调用Jquery函数(Jquery function not called)

我有jquery函数从我的mysql数据库中调用php脚本的一些数据，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'); }

任何帮助和/或建议将不胜感激。

非常感谢

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

最满意答案

$("a.restaurantItem")被调用一次。 它不寻找新的元素。 您需要使用.on()的事件委派语法来匹配那些动态创建的元素：

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

$("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 });