Question

在我的HTML显示中，我有一个表格，显示上传文件的一些名称。和一个删除该文件的按钮。

文件名由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>

我在这个html头部分有一个javascript函数，以确认他是否真的要删除它。

$(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');
                            }
                        });
                    });

这仅适用于第一个按钮，而其他按钮则重定向到此链接href =＆＃34; delete_this_file /

可以有人向我展示此代码中的错误。我无法弄清楚。

非常感谢

Answer 1

看一下这个链接： https://api.jquery.com/on/

on方法将事件绑定到动态创建的对象

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

当你使用常规的addEventListener时，它只将它绑定到DOM上的当前匹配元素，在此点之后创建的任何匹配元素都不会被绑定

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>

试试这个，更简化的答案

如何在动态创建按钮的点击事件上执行javascript功能。

2 个答案: