0

when the content of the page is loaded working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript not working on this div,

<?php //somePhpHere ?>
<!DOCTYPE html>
<html lang="en">
<head>
//bla blah

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../js/scripts.js"></script>

    <script >
  $(document).ready(function(){
  $("#tableSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</head>
<body>
   <ul class="list-unstyled">
       <li><a href="#" class="waves-effect" id="spde">Supervisor Details</a>
       </li>
       <li><a href="#" class="waves-effect" id="spre">Supervisor Registration</a>
       </li>
    </ul>

    <div class="jscontent" style="padding-top:100px">

    </div>
</body>
</html>

here is the .js file

$(document).ready(function(){

    $('.jscontent').load('contetntco.php #home');
    $('a').click(function(){
        var clickedLink1 = $(this).attr('id');
        $('.jscontent').load('contetntco.php #' + clickedLink1);
    })
});

content page


<div id="cmde">          
    <input class="form-control mb-4" id="tableSearch" type="text">

<table id="myTable" >
//bla bla
</table>
</div>

when the content of the page is loaded working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript not working on this div,

Vishva Madumal
  • 35
  • 9
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m May 03 '20 at 22:36
  • Event declarations such as `$("#tableSearch").on("keyup",` only occur on the elements that exist at the time the code runs. You need to add the event to new elements as youa add them (via $.load) or use event delegation. – freedomn-m May 03 '20 at 22:37
  • @freedomn-m its work.i added ``` $("#tableSearch").on("keyup" ``` function into load method. thank you. – Vishva Madumal May 04 '20 at 10:09
  • TBH I recommend using event delegation here. I always include the other option otherwise someone will say "what about..." – freedomn-m May 04 '20 at 10:10

0 Answers0