Can't trigger checkbox inside the modal window-CodePudding

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 ></div> But nothing shows on console when I check the checkbox on the modal window. What is happening?

Below is the modal window:

<div  id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <h5  id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >
                <div >
                    <div >
                        <input type="text"  value="">
                    </div>
                </div>
                <div >
                    <div >
                        <table >
                            <thead>
                                <tr >
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody ></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div >
                <button type="submit"  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

CodePudding user response：

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"  data-toggle="modal" data-target="#ModalGroupLinks">Open Modal</button>


<div  id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <h5  id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >
                <div >
                    <div >
                        <input type="text"  value="">
                    </div>
                </div>
                <div >
                    <div >
                        <table >
                            <thead>
                                <tr >
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody >
                            <tr>
                            <td><input style="width:1em;" type="checkbox" id="checkbox"/>&nbsp;</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div >
                <button type="submit"  id="footer-btn">Save</button>
            </div>
        </div>
    </div>
</div>