jQuery 重新加载 DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10885079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery reload the DOM?
提问by Peter
I have a page that has a button on it. When the user clicks the button it dynamically render's a form (ie it's not just showing a hidden form.. it's completely creating it using jQuery).
我有一个页面，上面有一个按钮。当用户单击按钮时，它会动态呈现一个表单（即它不只是显示一个隐藏的表单......它完全是使用 jQuery 创建的）。
My issue is the newly created form doesn't respond to any jQuery commands. This is the code I have for the rendered form at the moment.
我的问题是新创建的表单不响应任何 jQuery 命令。这是我目前用于渲染表单的代码。
$("#savenewlang").click(function(e) {
console.log("savenewlang has been clicked");
});
So it should just console.log when they click the submit button but it's not running.
所以当他们点击提交按钮时它应该只是 console.log 但它没有运行。
Any idea how to reload the DOM or assign that an actual event that correctly fires?
知道如何重新加载 DOM 或分配一个正确触发的实际事件吗？
回答by thecodeparadox
$("#container").on('click', '#savenewlang', function(e) {
console.log("savenewlang has been clicked");
});
Here #containerpoints to a parent element of #savenewlangthat belongs to DOM at page load.
Here#container指向#savenewlang页面加载时属于 DOM的父元素。
To specify this event .on()you need three arguments
要指定此事件，.on()您需要三个参数
.on(eventName, target, callback);
But for ordinary binding it only needs two arguments
但是对于普通绑定它只需要两个参数
.on(eventName, callback);
Read more about .on()
阅读更多关于 .on()
Remainder
余
Put all of your code within
把你所有的代码放在
$(document).ready(function() {
});
in short
简而言之
$(function() {
});
回答by Jason Kulatunga
Basically whats happening is that when you add content to the dom dynamically, you will have to manually attach handlers to the added dom elements. However if you use the jquery on() function, you can create persistent event handlers. Using the fact that events bubble up in the dom, when someone clicks on your dynamic dom element, which has no event handler for click, the event will bubble up to the body element, where the on() function will determine that the actual item clicked was #savenewlang, and then call the function(e){} that you defined.
基本上发生的事情是，当您动态地向 dom 添加内容时，您必须手动将处理程序附加到添加的 dom 元素。但是，如果您使用 jquery on() 函数，则可以创建持久性事件处理程序。利用事件在 dom 中冒泡的事实，当有人点击您的动态 dom 元素时，该元素没有用于单击的事件处理程序，该事件将冒泡到 body 元素，其中 on() 函数将确定实际项目单击的是#savenewlang，然后调用您定义的函数(e){}。
$("body").on('click', '#savenewlang', function(e) {
console.log("savenewlang has been clicked");
});
syntax would be:
语法是：
$('#selector_or_id_of_static_element').on('event_type','#selector_for dynamic_content', function(e){ //callback});
回答by Jeroen
The event handler is being added when the DOM element doesn't exist yet. You could try putting it in a function:
当 DOM 元素尚不存在时，正在添加事件处理程序。你可以尝试把它放在一个函数中：
function addEvent() {
$("#savenewlang").click(function(e) {
console.log("savenewlang has been clicked");
});
}
Now call this function after you have dynamically added the form.
现在在动态添加表单后调用此函数。
回答by roggan87
Since the elements are rendered dynamically, you'll need to use the .delegate() method top assign the function, like this:
由于元素是动态呈现的，您需要使用 .delegate() 方法 top 分配函数，如下所示：
$("body").delegate("#savenewlang", "click", function(e) {
console.log("savenewlang has been clicked");
});
See the reference for more info: http://api.jquery.com/delegate/
有关更多信息，请参阅参考：http: //api.jquery.com/delegate/
