Button does not call function when clicked

Question

I'd like a function t run when a button is clicked. It works fine when I approach it like so in the html body

<div type="button" id="decline" class="btn btn-danger mrs"></div>

However, I need it to work within the below code block, which is within a underscore.js wrapper. At the moment the function won't execute using the below, I'd like to understand why? is the id in the wrong place?

$('#containerFriendsPending').empty();
_.each(friends, function(item) {
    var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
    wrapper.append('<div type="button" 
                         id="decline" 
                         class="btn btn-danger mrs">' + 
                   'Decline' + 
                   '</div>');
    $('#containerFriendsPending').append(wrapper);
});

@onetwo12 No worries I've solved it and answered my own question — Dano007, Sep 13 '14 at 15:19

score 1 · Answer 1 · answered Sep 13 '14 at 15:18

1

Solved this myself.

The following needed to be added within the original question main code block

$('.decline').click(function() {
Friendrequest_decline();
});

So doing this works.

$('#containerFriendsPending').empty();
    _.each(friends, function(item) {
    var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
    wrapper.append('<div type="button" id="decline" class="btn btn-danger mrs">' + 'Decline' + '</div>');
    $('#containerFriendsPending').append(wrapper);

$('.decline').click(function() {
Friendrequest_decline();
});

                                });

answered Sep 13 '14 at 15:18

Dano007

1,872
6
29
63

2

Please note that you're creating multiple elements with the same `#decline` id. An id can only occur one time per page. – isogram Sep 13 '14 at 15:19
@isogram So I should use a class instead? – Dano007 Sep 13 '14 at 15:22
Yeah, that's what they were invented for :) – isogram Sep 13 '14 at 15:22
@isogram the only issue with using a class, is I dont think you can use two classes together? as per my updated answer the button now has two classes? – Dano007 Sep 13 '14 at 15:26
1

You can, separate them with spaces. See the `class="btn btn-danger mrs"`, those are already three separate classes. Just add "decline" to that list – isogram Sep 13 '14 at 15:27

score 1 · Answer 2 · answered Sep 13 '14 at 15:19

As you didn't provide the code that launches the click event it's hard to debug, but I'm going to assume it's actually the most common mistake that causes this problem: You are binding the click event before the element actually exists. That way, the browser will not know the new element also needs the click event.

Example:

$('.test').click(someFunction);
$('body').append( $('<div class="test">Click me!</div>');

This will not work, because the click event is bound first and the element is created later.

The jQuery .on() function can handle that by also watching for new elements that are created in the DOM:

$('body').on('click', '.test', someFunction);
$('body').append( $('<div class="test">Click me!</div>');

Now it will run someFunction successfully.

score 1 · Accepted Answer · edited May 23 '17 at 11:57

While the code solution you posted will work the first time:

$('#decline').click(function() {
    Friendrequest_decline();
});

It will not work after the wrapper code is replaced, as per your answer. You must use .on() to delegate the event:

$(document).on('click', '#decline', function() {
    Friendrequest_decline();
});

or

$('#containerFriendsPending').on('click', '#decline', function() {
    Friendrequest_decline();
});

Eg:

$(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})

Button does not call function when clicked

3 Answers3