Question

我遇到了jquery的问题。我使用ajax发送id从DB删除然后返回html文件更新内容而不重新加载页面（我使用struts 2），第一次运行或重新加载页面我的按钮工作正常（行被删除，我的内容被更新）但是当我尝试再次点击按钮，它没有响应。

enter image description here

我的剧本

$(document).ready(function() {
            $(".btnEdit").click(function() {
                alert("Edit");
            });
            $(".btnDelete").click(function() {
                id = $(this).attr('id');
                alert("Delete ID : " + id);
                $.ajax({
                    url: "delete",
                    type: 'POST',
                    data: {'id': id},
                    cache: false,
                    success: function(data, textStatus, jqXHR) {
                        $('.catagoryContent').remove();
                        $('.container').append(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert("error");
                    }
                });
            });
        });

抱歉，我忘了返回数据代码。

<div class="catagoryContent">
<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Edit / Delete</th>
        </tr>
    </thead>
    <tbody>
        <s:iterator value="catagoryList" var="catagory">
            <tr>
                <td>${catagory.id}</td>
                <td>${catagory.name}</td>
                <td>
                    <button class="btn btn-primary btnEdit" id="${catagory.id}">Edit</button>
                    <button class="btn btn-warning btnDelete" id="${catagory.id}">Delete</button>
                </td>
            </tr>
        </s:iterator>
    </tbody>
</table>

Answer 1

在文档就绪时，将类“btnDelete”的所有标记初始化为click函数。当您成功执行ajax调用时，您将所有内容替换为来自服务器的响应。此时，您将删除所有按钮，并使用新按钮添加新数据。

jQuery没有收听这些按钮，因为$（“。btnDelete”）。click（...仅在页面加载时设置。

如果你改变了

$(".btnDelete").click(function() {

到

$(document).on("click", ".btnDelete", function() {

将新数据添加到.container后它仍然有效当您使用类“.btnDelete”动态添加新标记时，“on”函数也会触发（请参阅here）

Answer 2

您没有在更新的html上收听click事件。

你应该使用

$list.on('click', '.btnEdit', function() { ... })

其中$list是包含项目的元素（可能是<ul>）

Answer 3

这是因为在页面启动时附加了click事件处理程序。但是当你重新加载页面的一部分时，带有onclick处理程序的旧按钮正被删除。

决定使用

$(document.body).delegate('.btnDelete', 'click', function(){...})

而不是

$(".btnDelete").click(function(){...})

这样你就可以将事件处理程序附加到body元素（它将始终触发），jQuery将检查被点击的元素是否具有类.btnDelete。因此，即使您删除这些按钮然后插入新按钮，它也会起作用。

另一种方法是每次创建时都将onclick处理程序附加到按钮上，但我认为第一种方法更容易

附加html数据时不能多次单击按钮

3 个答案: