JQuery script wont work

Question

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.

Tip: you can use `var id = $(this).data("id");` instead of `var id = $(this).attr("data-id");` — Eugen, Jan 02 '15 at 10:33
This works on jsFiddle, you sure you are including the jquery correctly? http://jsfiddle.net/9Lnbag4k/1/ — Antony D'Andrea, Jan 02 '15 at 10:39
$(document).ready(function(){ $(".accept").click(function(){ var id = $(this).attr("data-id"); $("#"+id).remove(); }); }); — user3040610, Jan 02 '15 at 10:40
I find it outrageous that this has been marked as a duplicate. — Antony D'Andrea, Jan 02 '15 at 10:41

Gnucki · Accepted Answer · 2015-01-02T10:51:23.507

0

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

edited Jan 02 '15 at 10:51

answered Jan 02 '15 at 10:36

Gnucki

5,043
2
29
44

Nope, still the same, works in the console but not in the script or even if the script is written in the page itself, it does not work. – Daniyaal Khan Jan 02 '15 at 10:38
I tested this code, it works with what you gave. Maybe you forgot to copy the `$(document).ready(function() {` part. – Gnucki Jan 02 '15 at 10:42
The OP code works in JSFiddle. So JSFiddle might add the document ready part automatically or JQuery is not correctly being included. – Antony D'Andrea Jan 02 '15 at 10:44
I did, the thing is, as per what I am doing, the second code snippet is loaded in by the other script. If you try this in a static page, it will work. But I am working in a dynamic environment. – Daniyaal Khan Jan 02 '15 at 10:44
I added the [jsfiddle](http://jsfiddle.net/Ln1L33dv/). – Gnucki Jan 02 '15 at 10:45
Ok I understood why it does not work. Try the code of my updated answer. – Gnucki Jan 02 '15 at 10:46
If you see, the original contents of my page are empty. But the javascript makes an ajax call and loads the contents of the second code snippet in. If you do that, it does not work. – Daniyaal Khan Jan 02 '15 at 10:47
Try the code of my new answer – Gnucki Jan 02 '15 at 10:51
Thanks! It works now. I owe you a ton! I had been pulling out my hair due to this issue! – Daniyaal Khan Jan 02 '15 at 10:59
Glad if I could help you. – Gnucki Jan 02 '15 at 11:07

JQuery script wont work

1 Answers1