jQuery .load() function only changes content once

Question

I've searched for other similar questions, but no answer works for my problem.

Here is my jQuery:

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

And here is the php that generates the updated content:

$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>';

Even though it is not beautiful php code, it works. The problem is that the .load() function in jQuery only works once. Also, I've tried using .on('click', function(){}) on the <i> element as well. How can I make it work more than once?

score 4 · Accepted Answer · edited Apr 15 '16 at 12:59

4

Use event delegation. It is used to bind all matched elements existing now and dynamically created elements.

Note : while using event delegation you should attach it to a static element. Here I am attaching it to document. You can bind it to any other static element. Binding it to document have some performance issue. I don't know which all elements are static in your page, so I used document

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

edited Apr 15 '16 at 12:59

arch1ve

183
1
12

answered Apr 15 '16 at 12:38

Rino Raj

6,264
2
27
42

The elements are inserted inside the . would it be ok to use that as my static element? – arch1ve Apr 15 '16 at 12:45
Yes. It will be fine. – Rino Raj Apr 15 '16 at 12:47
better bind it to `.container` – Velimir Tchatchevsky Apr 15 '16 at 12:48
Now the jQuery doesn't work at all for the following: `$(".container").on("i[id^='delete']", 'click', function(){ ` or `$("body").on("i[id^='delete']", 'click', function(){` – arch1ve Apr 15 '16 at 12:54
1

Fixed it!! For the syntax is different: `.on(events, selector, data, handler)` and `.delegate(selector, events, data, handler)` – arch1ve Apr 15 '16 at 12:57
1

@arch1ve I approved the edit. Thank you. – Rino Raj Apr 15 '16 at 13:02

jQuery .load() function only changes content once

1 Answers1