Can't trigger checkbox inside the modal window

December 27, 2021

I have webpage where on clicking a button, modal window opens and in that window there is a table containing 3 columns. 1 for links, 2nd for share and 3rd for delete. 2nd and 3rd column only contains checkbox as defined by <td><input style="width:1em;" type="checkbox" id="checkbox"/> </td>.

I wrote a script something like this:

            $("#checkbox").click(function(){
                console.log("Checkbox clicked");
            })

This script works fine and the console displays the string when moved it outside the modal window, directly in the main<div class="container"></div> But nothing shows on console when I check the checkbox on the modal window. What is happening?

Below is the modal window:

<div class="modal fade" id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content showLink-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body grid-container">
                <div class="row g-0 justify-content-center">
                    <div class="col-sm-6 link-input-here">
                        <input type="text" class="showLink-modal-gp-name" value="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="show-groupLinks">
                            <thead>
                                <tr class="header">
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody class="showLink-table"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-ftr">
                <button type="submit" class="button-box" id="footer-btn">Save</button>
            </div>
        </div>
    </div>
</div>

Here <tbody> is empty as I am creating its child elements(which contains input field for checkbox) in success:function() through ajax

>Solution :

Use Event Delegation as below:

 
            
  $(document).on('click', '#checkbox', function () {

    console.log("Checkbox clicked");
  })

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalGroupLinks">Open Modal</button>


<div class="modal fade" id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content showLink-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body grid-container">
                <div class="row g-0 justify-content-center">
                    <div class="col-sm-6 link-input-here">
                        <input type="text" class="showLink-modal-gp-name" value="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="show-groupLinks">
                            <thead>
                                <tr class="header">
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody class="showLink-table">
                            <tr>
                            <td><input style="width:1em;" type="checkbox" id="checkbox"/>&nbsp;</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-ftr">
                <button type="submit" class="button-box" id="footer-btn">Save</button>
            </div>
        </div>
    </div>
</div>