Jquery .click won't console log or alert

Question

I have the following jquery:

$(".order_submit").click(function() {
  alert( "Alert" );
  console.log("TEST")
});

When I put that function in to console I get the following:

$(".order_submit").click(function() {
  alert( "Alert" );
  console.log("TEST")
});
[
<input id=​"order_button" type=​"button" class=​"order_submit" value=​"Submit Order">​
]

The button is created via this javascript:

var total = 0;
    for (var x in prodData) total += prodData[x].price * prodData[x].quantity
    total = Math.round(total * 100) / 100
    var subtotal = '<tr><td><input id="order_button" type="button" class="order_submit" value="Submit Order"></td><td>Subtotal</td><td>$' + total + '</td></tr>';

Does that have anything to do with it?

Answer 1

As the button is added to the page after DOMReady you need to use a delegated event:

$(document).on('click', '.order_submit', function() {
    alert('Alert');
    console.log('TEST')
});

Note that for best performance you should change document in my example to the nearest element in the DOM which is present when the page loads. I would imagine this will be the table that subtotal gets appended to.

Answer 2

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

You need to use Event delegation for dynamically generated elements

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

General Syntax

$(document).on(event, selector, eventHandler);

Ideally you should replace document with closest static container for better performance.

Code

$(document).on('click',".order_submit", function() {
  alert( "Alert" );
  console.log("TEST")
});