.click not being registered on button

Question

I have this button rendered after some text in an unordered list:

The button's HTML is like this:

<a 
    data-action="remove" 
    data-class-name="ECEC 301 Advanced Programming for Engineers Lab"    
    class="btn btn-danger remove-item btn-xs btn-font-12-px btn-raised margin-add-to-cart mdi-content-remove-circle-outline">
</a>

And this is the unordered list element it is within:

I am trying to write some jQuery that calls an action when the button is clicked, but no matter what I write, I just cannot register the click action, for example:

$('.btn.btn-danger.remove-item').on('click', function(){
    console.log("you should see this");
});


    $("[data-action]").click(function() {
        console.log("yeah");
    });


    $('a[data-action="remove"]').click(function() {
        console.log("yeah");
    });

EDIT: The button is created dynamically AFTER page-load using jQuery (I call my JSON API to create the unordered list of classes)

is the element on the page before the code adding the click handler is loaded? Or is it created dynamically — Patrick, Aug 22 '15 at 05:16
$('.btn.btn-danger.remove-item') , run this in the console on the browser, what do you see, if returns [] that means selector returns nothing and hence no click registered — cafebabe1991, Aug 22 '15 at 05:17
Is the button present when you attach the handler? If not, try [delegation](http://api.jquery.com/delegate/). — reergymerej, Aug 22 '15 at 05:17
Tried wrapping in `$(document).ready(function() {$('.btn.btn-danger.remove-item').on('click', function(){ console.log("you should see this"); });})` ? Can include `html` at Question ? , create stacksnippets , jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, Aug 22 '15 at 05:18
Please [edit] your question to include a [mcve] reproducing the problem. Without an MCVE your question is off-topic for Stack Overflow. — , Aug 22 '15 at 05:20
@guest271314 The jQuery is wraped around document ready already =) — theGreenCabbage, Aug 22 '15 at 05:21
@theGreenCabbage Try registering `click` event to `document` delegating to selector `'.btn.btn-danger.remove-item'` See post , http://api.jquery.com/on#direct-and-delegated-events — guest271314, Aug 22 '15 at 05:27
This same question is asked several times each and every single day. Why did you go ahead and ask it when the duplicates are clearly shown when you start writing your question? — JK., Aug 22 '15 at 06:20
@JK. Because I wanted to get on your nerve And it's working. Just kidding. I didn't know it was a duplicate until it was answered when SO suggested the duplicate tag. Seeing that the other answers had better explanations I chose to mark it duplicate. — theGreenCabbage, Aug 22 '15 at 17:35

Pranav C Balan · Accepted Answer · 2015-08-22T05:29:00.947

4

Since button is generated dynamically you need to use event delegation

$(document).on('click','.btn.btn-danger.remove-item', function(){
    console.log("you should see this");
});

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

Taken from : http://learn.jquery.com/events/event-delegation/

edited Aug 22 '15 at 05:29

answered Aug 22 '15 at 05:22

Pranav C Balan

113,687
23
165
188

This worked! Will accept in 7 minutes. I am guessing for dynamically generated elements you must use `$(document).on`? – theGreenCabbage Aug 22 '15 at 05:23

score 1 · Answer 2 · answered Aug 22 '15 at 05:25

The issue is that the element doesn't exist when the click handler is being added.

Basically, you are saying "hey jquery, find this element and do XYZ when it is clicked". jQuery looks for it, doesn't find anything (since the element has not been created yet), and since it is chill it doesn't say anything to you about it (it would be super annoying if it errored out all of the time).

The way around this is by using event delegation. What that means is that you attach the event to an element that will be there, and then jQuery filters every event sent to that parent element and checks to see if the event that triggered it happened to an element that matches the selector.

It may sound complicated, but it is straight forward. All you need to do is update

$(".btn.btn-danger.remove-item").on("click...

to this

$(document).on("click", ".btn.btn-danger.remove-item"...

This is the best explanation even though I didn't use this answer =) — theGreenCabbage, Aug 22 '15 at 05:35

.click not being registered on button

2 Answers2