我有一个页面，上面有一个按钮。当用户单击按钮时，它会动态呈现一个表单（即它不只是显示一个隐藏的表单......它完全是使用 jQuery 创建它）。
我的问题是新创建的表单不响应任何 jQuery 命令。这是我目前呈现的表单的代码。
$("#savenewlang").click(function(e) {
console.log("savenewlang has been clicked");
});
所以当他们点击提交按钮但它没有运行时，它应该只是 console.log。
知道如何重新加载 DOM 或分配正确触发的实际事件吗？
【问题讨论】：
$("#container").on('click', '#savenewlang', function(e) {
console.log("savenewlang has been clicked");
});
这里#container 指向#savenewlang 的父元素，该元素在页面加载时属于DOM。
要指定此事件.on()，您需要三个参数
.on(eventName, target, callback);
但对于普通绑定，它只需要两个参数
.on(eventName, callback);
阅读更多关于.on()
将所有代码放入
$(document).ready(function() {
});
总之
$(function() {
});
【讨论】：
基本上发生的情况是，当您动态地将内容添加到 dom 时，您必须手动将处理程序附加到添加的 dom 元素。但是，如果您使用 jquery on() 函数，则可以创建持久事件处理程序。利用事件在 dom 中冒泡的事实，当有人单击您的动态 dom 元素时，该元素没有用于单击的事件处理程序，事件将冒泡到 body 元素，其中 on() 函数将确定实际项目点击的是#savenewlang，然后调用你定义的函数(e){}。
$("body").on('click', '#savenewlang', function(e) {
console.log("savenewlang has been clicked");
});
语法是：
$('#selector_or_id_of_static_element').on('event_type','#selector_for dynamic_content', function(e){ //callback});
【讨论】：
当 DOM 元素尚不存在时，正在添加事件处理程序。您可以尝试将其放入函数中：
function addEvent() {
$("#savenewlang").click(function(e) {
console.log("savenewlang has been clicked");
});
}
现在动态添加表单后调用此函数。
【讨论】：
由于元素是动态呈现的，因此您需要使用 .delegate() 方法顶部分配函数，如下所示：
$("body").delegate("#savenewlang", "click", function(e) {
console.log("savenewlang has been clicked");
});
更多信息请参见参考资料：http://api.jquery.com/delegate/
【讨论】：
.on()真的那么难用吗？