0

The .item click function works, but when I click the refresh button it does not work. Please help me. I tried to move the code in the head tag and at the end of the body but it does not work.

<button id="button" type="submit">Refresh</button>
<div id="demo">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
</div>

<script src="jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#button").click(function() {
      $("#demo").load(location.href + " #demo");
      return false;
    });

    $(".item").click(function() {
      $(this).css("background", "red");
    });
  });
</script>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Amir farouk
  • 1
  • 1
  • see this [solution](https://stackoverflow.com/questions/2194992/jquery-is-not-defined/21378590#21378590) it details how to properly setup the ready function – Andrew Killen Jan 12 '18 at 10:22
  • 1
    The issue is because you're dynamically removing then re-adding the `.item` elements to the DOM so you need to use a delegated event handler. See the duplicate for exactly how you do it. That said, there are much better ways of re-setting the state of the `#demo` div than making an AJAX request to reload the content of the current page. – Rory McCrossan Jan 12 '18 at 10:23
  • You need `$(body).on('click', '.item', function () { ... });` –  Jan 12 '18 at 10:23
  • no i will use this code in php later to delete or view items . so i want to refresh the element that has changed only not refresh all page – Amir farouk Jan 12 '18 at 10:24

0 Answers0