函数只更改一次内容

jQuery .load() function only changes content once

本文关键字：一次 函数      更新时间：2023-09-26

我已经搜索过其他类似的问题，但没有一个答案适用于我的问题。

这是我的jQuery:

$("i[id^='delete']").click(function() {
  $(".container.tim-container").load("getreservations.php");
});

这里是生成更新内容的php：

$count = 0;
echo '<div class="container tim-container">';
echo "<div>";
echo '<h1 class="title">View Reservations</h1>';
echo "</div>";
echo '<div class="reservations">';
foreach ($noDupes as $facilities)
  {
    echo '<div class="col-sm-12 left-column">';
    echo '<h2 id="facility_name'.$count.'" class="facility-title">'.$facilities["facility_name"].'</h2>';
    echo '</div>';
    foreach ($facilities["dates"] as $dates => $dateValues)
    {
      echo '<div class="col-sm-3 left-column">';
      echo '<h4 id="facility_date'.$count.'" class="facility-title">'.$dateValues["date"].'</h4>';
      echo '</div>';
      echo '<div class="col-sm-9 right-column">';
      echo '<ul>';
      foreach($dateValues["timeslots"] as $timeslots => $timeslotValues)
      {
        echo '<p id="start_time'.$count.'" hidden>'.$timeslotValues["start_time"].'</p>';
        echo '<p id="end_time'.$count.'" hidden>'.$timeslotValues["end_time"].'</p>';
        echo '<li class="row time-slot text-align">';
        echo '<h4 class="display_inline">'.$timeslotValues["start_time"].':00 - '.$timeslotValues["end_time"].':00</h4><i id="delete'.$count.'" class="fa fa-trash-o"></i>';
        echo '</li>';
        $count++;
      }
      echo '</ul>';
      echo '</div>';
    }
  }
  echo '</div>';
  echo '</div>';

尽管它不是漂亮的php代码，但它是有效的。问题是jQuery中的.load()函数只能工作一次。此外，我还尝试在<i>元素上使用.on('click', function(){})。我怎样才能让它工作不止一次？

使用事件委派。它用于绑定现在存在的所有匹配元素和动态创建的元素。

注意：在使用事件委派时，您应该将它附加到一个静态元素。我把它附在document上。您可以将它绑定到任何其他静态元素。将其绑定到document存在一些性能问题。我不知道你的页面中哪些元素都是静态的，所以我使用了document

$(document).on('click', "i[id^='delete']", function() {
    $(".container.tim-container").load("getreservations.php");
});
相关文章：