php - Jquery関数が呼び出されていません

Question

私はphpスクリプトを私のmysqlデータベースからいくつかのデータを呼び出すjquery関数を持っています.jquery関数は以下のように呼び出されます：

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

これを実行すると、データが正常に取得され、HTML が作成されて Web ページに挿入されます。以下に示すように：

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