Jquery button click event not firing

Question

seems like a simple issue but the solutions to the other problem don't seem to work from me.

Trying to trigger a AJAX request from a button click but it doesn't seem to be firing.

example HTML

<button class="remove_weight_button" id="15">x</button>

javascript

$(".remove_weight_button").click(function(){
    var button_id = $(this).attr("id");
    $.ajax({
        type: "POST",
        url: "weight_tracker_process.php",
        data: {
            weight_id: button_id,
            action: "remove"
        },
        success: function(){
            getWeightData();
        },
        error: function(){
            alert("data removal error");
        }
    });
    return false;
});

First things first, Do you see any errors in the console?, is it reaching the handler (if not is it wrapped in document.ready), do you see any js error or network error in the console? — PSL
– PSL, Commented Oct 8, 2013 at 0:44
Are you sure the javascript is being run after the button is loaded? That's a common error. — Robin
– Robin, Commented Oct 8, 2013 at 0:46

Lloyd Banks · Accepted Answer · 2013-10-08 00:53:16Z

125

The code you have works fine in fiddle. Is your button being dynamically rendered through AJAX after the initial page load?

Use

$(document).on("click", ".remove_weight_button", function(){

instead of

$(".remove_weight_button").click(function(){

answered Oct 8, 2013 at 0:53

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

GrepGrep Over a year ago

ah of course, yep you're right it's being loaded by ajax. How does the above fix this?

Lloyd Banks Over a year ago

@user2803072 The ".click" event you're using only looks for elements that were drawn during the initial page load. The "on" event looks for elements in the current state of the page

lko Over a year ago

Alternatively $(".remove_weight_button").live("click", function() { ... if the page is loaded dynamically and you are using an older version of jQuery. The key is the click doesn't notice dynamically loaded DOM elements as you mentioned.

Shadi Over a year ago

This solution saved me .. I was trying for 1 hour to just fire an event with JQuery and could not do it.

Lloyd Banks Over a year ago

@Mike.MKrallaProductions You're confused about the parent / child relationship. The document is the parent element in the example above. It could be any element that is encapsulating .remove_weight_button.

|

Collectives™ on Stack Overflow

Jquery button click event not firing

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related