jQuery脚本将无法正常工作

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/203198/event-binding-on-dynamically-created-elements" dir="ltr">Event binding on dynamically created elements?</a>
                            <span class="question-originals-answer-count">
                                (23 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2015-01-02 10:36:30Z" class="relativetime">5 years ago</span>.</div>
        </div>
    </aside>

I have the following setup for a community website:

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

getRequests.js appends the following into the 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 has the following:

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

So, you would expect that when I click the accept button, the container with id=1 should get removed, but for some reason, it doesn't.

And also, to add to the peculiarity, the code works if I inject it through the console.

And, for the record, the script is not showing any errors.

</div>

Answer 1

Try:

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

Explanation:

You have to set the event for all new incoming node .accept. You have to bound the event on the document. See live event.

Here is the corresponding jsfiddle