Ajax Loading Data and Form in DataTables

Question

I am building a page to display students' lists based on class name on data tables. The data tables are loaded using ajax requests, and each row on the table has buttons to forms on a modal for making changes and updates to a student. The problem I am having is, the first page that loaded without ajax, the submit button on the modal works fine, but on the tables loaded using ajax, the submit buttons are not working.

Buttons to Load Students List By Class Name

The Students List Data Table and Buttons to Load Forms

To try out the submit buttons, I just wanted to display an alert that the button was clicked using the code below:

$(document).ready(function(){
$('.promote-button').on('click', function(e){
    e.preventDefault();
    alert('Clicked');
}); });

viewstudents.php

<tbody>
<?php
while($row = $stmt->fetch()){
?>
    <tr>
        <td><?php echo $no; ?></td>
        <td><?php echo escape($row['student_firstnames']). ' ' . escape($row['student_surname']) ; ?></td>
        <td><?php echo escape($row['student_gender']); ?></td>
        <td><?php echo escape($row['student_current_class']) . ' - ' . escape($row['student_programme']); ?></td>
        <td><?php echo escape($row['student_status']); ?></td>
        <td>
            <?php include 'school_students/studentsactionsmenu.php'?>
        </td>
    </tr>
    <?php include 'school_students/studentsactionsmodals.php'?>

<?php
    $no++;
}
?>

jQuery Method to Get Students List

function getstudentslist(classname, classIndex){
showSpinner();

$.ajax({
    url : 'ajaxviewschoolstudent.php',
    dataType: "html",   
    type : 'GET',
    data:{
        activeclass: classname
    },
    cache: false,
    success : function (data) {
        $("#results-table").html(data);
        var dataTable = $("#results-table").DataTable();
        $('table.table-data').DataTable();
        
        //document.getElementById('spinner-text').textContent = 'Done';
        hideSpinner();
    },
    error : function () {
       toastr.error('An Error Has Occured');
       hideSpinner();
    }
});

}

studentsactionsmodals.php

<div class="modal-body">
Promote the student <?php echo '<span style="color:#FF0000;">' . escape($row['student_firstnames']) . ' ' . escape($row['student_surname']) . '</span>?' ?>
<!-- form start -->
<form role="form" method="post" class="promote-form" class="promote-form needs-validation" novalidate>
    <div class="card-body">
        <input type="hidden" class="form-control" id="id" name="id" value="<?php echo escape($row['student_id']); ?>">
        <div class="form-group row">
            <label for="class-name" class="col-sm-4 col-form-label">New Class Name</label>
            <div class="col-sm-5">
                <select class="form-select" name="class-name" id="class-name" value="<?php echo escape(Input::get('class-name')); ?>" required>
                    <?php
                        foreach($classes_list as $class_name){
                            ?>
                            <option value="<?php echo $class_name; ?>"><?php echo $class_name; ?></option>
                            <?php
                        }
                        ?>
                </select>
            </div>
        </div>

    </div>

    <div class="card-footer">
        <button type="submit" class="promote-button" class="btn btn-info">Submit</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    </div>
</form>
<!-- form end -->

Kindly Assist

Answer 1

To convert the code to event delegation, you can attach the event listener to a parent element that is present in the DOM when the page loads. Here's an example:

$(document).on('click', '.promote-button', function(e){
    e.preventDefault();
    alert('Clicked');
});

In the modified code, $(document) acts as the parent element to which the event listener is attached. The event listener listens for click events on elements with the class "promote-button" that are descendants of the document element. This way, even if new elements with the "promote-button" class are added dynamically to the DOM, the event will still be handled correctly.