jQuery выбор кнопки, созданной на лету

Question

Я создаю кнопку «на лету» и добавляю ее в div. Я хочу захватить событие click на этой кнопке.

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

, а затем пытается захватить событие щелчка с этим

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

Эта функция не выполняется. Не знаю, почему. Я также пробовал его с классом div .buttonWrapper, но он не работал.

Answer 1

Вы можете использовать on обработчик для связывания динамически создаваемых элементов:

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

Это будет связывать само событие с menuDiv элементом, и будет работать click обработчик для всех детей #addToOrder

Answer 2

Проблема в том, что ваш button created dynamically

Попробуйте использовать следующий код

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

Answer 3

Попробуйте с этим

$(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>