jQuery selection of a button created on the fly

Question

I am creating a button on the fly and appending it to a div. I want to capture the click event on that button.

function(){
  $('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
}

and then trying to capture the click event with this

$("#addToOrder").click(function () {
  //Grab the selections made on the form
  window.alert('i m in add to order');
  updateOrderWindow();
});

This function is not executing. Don't know why. I have also tried it with the .buttonWrapper div class but it didn't work.

[see this](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Dhaval Marthak, Dec 09 '16 at 06:50
Use Event delegation such as 'on' events to bind dynamic elements — Vinod Louis, Dec 09 '16 at 06:52
With literal your title as search words you have your answer at the first link appearing. — Kilian Stinson, Dec 09 '16 at 06:55
@KilianStinson It did not show, otherwise why bother writing the details. — Novice, Dec 09 '16 at 06:59

score 3 · Accepted Answer · answered Dec 09 '16 at 06:51

You may want to use the on handler to bind dynamically created elements:

$('#menuDiv').on('click', '#addToOrder', function () {
    //Grab the selections made on the form
    window.alert('i m in add to order');
    updateOrderWindow();
});

This will bind the event itself to the menuDiv element, and will run the click handler for any children #addToOrder

score 0 · Answer 2 · edited Sep 19 '17 at 16:53

0

Problem that your button created dynamically

You can try to use next code

$(document).on("click", "#addToOrder", function(){
  alert ('button clicked');
});

edited Sep 19 '17 at 16:53

Shiladitya

12,003
15
25
38

answered Dec 09 '16 at 06:53

Fullbalanced

87
11

score 0 · Answer 3 · edited Sep 19 '17 at 16:53

Try with this

$(function(){
  $('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
});
$('#menuDiv').on('click','#addToOrder', function (){
  //Grab the selections made on the form
  window.alert('i m in add to order');
  //updateOrderWindow();
});

<div id="menuDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery selection of a button created on the fly

3 Answers3