如何在动态创建的按钮的click事件上执行javascript函数。

Question

In my HTML display I have a table showing some names of uploaded files. and a button to delete that file.

the names of files are loaded dynamically by Php

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a href="delete_this_file/<?php echo $val['id']; ?>" class="delete" data-confirm="Are you sure to delete this item?"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>

and I have a javascript function in my html head section like this, to confirm did he really want to delete it.

$(document).ready(function() {
                        var deleteLink = document.querySelector('.delete');
                        deleteLink.addEventListener('click', function(event) {
                            event.preventDefault();

                            var choice = confirm(this.getAttribute('data-confirm'));

                            if (choice) {
                                window.location.href = this.getAttribute('href');
                            }
                        });
                    });

this is working well only for first button only, and for other buttons it is redirecting to this link href="delete_this_file/

can some one show me the error in this code. I can't figure it out.

Thank You very Much

Answer 1

Take a look at this link: https://api.jquery.com/on/

the on method will bind events to dynamically created objects

$(document).on("click", ".delete", function() {
    //your code here
});

When you use the regular addEventListener, it binds it only to the current matching elements on the DOM, any matching element created after this point, will not be binded

Answer 2

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a style="cursor:pointer" onclick="deleteFun(<?php echo $val['id']; ?>)" class="delete"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
    <script>
    function deleteFun(id){

    var choice = confirm("Are you sure to delete this item?");

       if (choice) {
           window.location.href = "delete_this_file/"+id;
       }
    }

    <script>

just Try this, more minimized answer