在任何事件发生后，一旦它重新获得，就会使用ajax for table。

Question

I am trying to make single page application with jquery using php i have created page which have 3 events inserts update and delete after each event data also be re fetched to display on table with new data but now the problem happening is when data be re fetched it not let events to work again like there are two button on every row of data edit and delete. but once you edit first row it not let you edit any other row. there must be way to make it but what could be solution i am newbie with jquery.

Here is my jquery.

$( document ).ready(function() {
  // When click the button.
$("#save").on('click',function() {

// Assigning Variables to Form Fields

var category  = $("#catname").val();

if(category){
      $.ajax({

     type: "post",
     url: "insert.php",
    asynch: false,
   data: {
    "category": category 

     },
     success: function(data){
          alert("Category Saved Successfully. ");
          $("#ecname").html("");
          $("#show").html(data);
        $( '#form_category' ).each(function(){
this.reset();


 });
     }
 });
}

else{
                     $("#ecname").html("fill category name");
}

});
  });

Here is html of table.

    <div class="m-portlet m-portlet--mobile">
                    <div class="row" id="categories">

                <?php

                        $i = 1;
$categories = $obj->getallcategories();
echo '
<div class="col-lg-12">
                            <div class="m-portlet__body">

                            <table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                                <thead>
                                    <tr>
                                        <th>
                                        Id
                                        </th>
                                        <th>
                                            category Name
                                        </th>
                                        <th>
                                            category Name
                                        </th>
                                        <th>
                                            Edit
                                        </th>
                                        <th>
                                            Delete
                                        </th>

                                    </tr>
                                </thead>
                                <tbody id="show">
                            ';


foreach($categories as $category){
    echo'
    <tr>
    <td>'.$i.'</td><td>'.$category['cname'].'</td>
    <td>categories</td>
    <td><button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button></td>
    <td><button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button></td>
    </tr>
 ';
    $i++;
 }

                        ?>
                        </tbody>
                            </table>
                        </div>

                        </div>
                        </div>

Here is insert.php page which return data on ajax call of #save button click.

<?php

 include("../functions/backend.php");

 $obj = new Crud();




if(isset($_POST['category']))
 {


  $cname = $_POST['category'];
  $obj->addcategory($cname);

                $i = 1;
$categories = $obj->getallcategories();


foreach($categories as $category){
    echo'
        <tr>
    <td>'.$i.'</td><td>'.$category['cname'].'</td>
    <td>categories</td>
    <td><button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button></td>
    <td><button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button></td>
    </tr>
 ';
    $i++;
}



  }

 else {

echo "<script>alert('Something went wrong')</script>";
 }





 ?>

edited with new self function which i want to make delegate.

    function removeitem() {
        var cid = $("[id^=del]").val(); 
      $.ajax({

     type: "post",
     url: "delete.php",
    asynch: false,
   data: {

       "cid": cid

     },
     success: function(data){

             $("#show").html(data);
     }


   });



}


  $("[id^=del]").confirm({
text: "Are you sure you want to delete ?",

confirm: function(button) {

//removeitem();


},
cancel: function(button) {
    // nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default",
dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
 });

Answer 1

You need to read about event-delegation.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

For example, you need to do it like this:

$('body').on('click','#mybutton', function(){
   //code here..
});