JQuery 脚本无法运行

Question

我对社区网站进行了以下设置：

<div id="posts">
    <div class="container">
        <div id="placeholder"></div>
        <h1>Friend Requests</h1>
    </div>
</div>

getRequests.js 将以下内容附加到 container div：

<div id="4" class="result">
    <a href="user.php?id=4">
        <img src="images/user-uploads/profile/?id=4">Random Guy
    </a>
    <div class="response">
    <button data-id="4" class="accept">Accept</button>
    <button data-id="4" class="deny">Deny</button>
    </div>
</div>

friendResponse.js 具有以下内容：

$(function(){
  $(".accept").click(function(){
    var id = $(this).attr("data-id");
    $("#"+id).remove();
  });
});

因此，您可能希望当我单击接受按钮时，容器 with id=1 应该被删除，但由于某种原因，它没有。

而且，为了增加特殊性，如果我通过控制台注入代码，代码就可以工作。

并且，郑重声明，脚本未显示任何错误。

Answer 1

尝试：

$(function() {
  $(document).on("click", ".accept", function() {
    var id = $(this).data("id");
    $("#"+id).remove();
  });
});

解释：

您必须为所有新传入节点设置事件 .accept。您必须在文档上绑定事件。参见 live event。

这里是对应的jsfiddle

JQuery 脚本无法运行

JQuery script wont work

javascript

php

jquery

html

ajax