JS selector on click not working for django model generated content

Question

This might be a dumb mistake but I have this code:

$('#delete-btn').on('click', function(){
    return confirm('Are you sure you want to delete this?');
});

the alert does not occur but with this code it does:

$(document).on('click', '#delete-btn', function(){
    return confirm('Are you sure you want to delete this?');
});

from what I understand they are the same thing, but the second tries to process the event every click on the page looking for the specified id. I tried putting it in a document ready block but that didn't help.

I don't understand why one works and the other does not.

Yes, the alert does not happen. And no it's not added dynamically — ss7, May 27 '16 at 13:15
Where did you put your code, at the start or at the end of the document? If at the start, that explains it. — trincot, May 27 '16 at 13:15
The code is in a script file that is included at the top of the body. But above where the #delete-btn is. Would that be the reason? — ss7, May 27 '16 at 13:17
That could very well be the reason. It's good practice to leave your JS at the bottom of the file. — A.Sharma, May 27 '16 at 13:18
@MilindAnantwar: Even in a ready event, I would still leave it at the bottom of the file. That's just personal preference for me though to develop good practices. In the OP's case, even putting it in a ready event didn't work. — A.Sharma, May 27 '16 at 13:20

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Your first code will also work if the element you reference is part of the document at that time, so make sure to put the script near the end of the document, or else wrap it in the ready handler:

$(function () {
    $('#delete-btn').on('click', function(){
        return confirm('Are you sure you want to delete this?');
    });
});

The second script ($(document).on('click' ...)) works, because the document is there from the start, so the handler is bound to it. At the time of the click, the event bubbles up to the document and the handler kicks in.

Dynamically created content

If your button is not in the document when the page loads, but is generated dynamically, the above code might still look for the button to soon. You mentioned django generates the button. It probably also captures an event when the document is ready, then queries the database, waits for its reply (in most cases this is asynchronous), and only then adds the button. If your code has already run by that time, it missed the button, and did not attach an event handler to it.

In that case, it is indeed a more solid solution to use the event delegation to the document level ($(document).on('click' ...)).

edited Jun 20 '20 at 09:12

Community

1
1

answered May 27 '16 at 13:17

trincot

317,000
35
244
286

I tried both a ready block and moving it under the element oddly neither of them work – ss7 May 27 '16 at 13:23
Did you check if you have errors in the console? The ready block should work if the button with that ID is present (and jQuery must be loaded first of course). – trincot May 27 '16 at 13:26
Nope no errors. And jQuery is loaded since it is used elsewhere on the page. I realized that because django generates the button as creates rows for a table from database models that was why it wasn't working. But that doesn't explain why it doesn't work in a document ready block. – ss7 May 27 '16 at 13:32
Wait: *django generates the button*: that is important information. Your code should run *after* django has created that button. I will update my answer. – trincot May 27 '16 at 13:36
Yeah, sorry I forgot to mention that. But I have the same issue on another page where the element is just a normal link. In devtools the event listener for click doesn't show any of these. – ss7 May 27 '16 at 13:39
Ah your update helps a lot thanks. – ss7 May 27 '16 at 13:43

JS selector on click not working for django model generated content

1 Answers1

Dynamically created content

Linked