Question

我正在创建一个按钮并将其附加到div。我想捕获该按钮上的click事件。

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

然后尝试使用此

捕获click事件

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

此功能未执行。不知道为什么。我也尝试过.buttonWrapper div类，但它没有用。

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>

jQuery选择即时创建的按钮

3 个答案: