jQuery如何重新加载DOM？

Question

我有一个页面上有一个按钮。当用户点击该按钮时，它会动态地呈现一个表单（即不仅是显示隐藏的表单...而是使用jQuery完全创建它）。

我的问题是新创建的表单不响应任何jQuery命令。目前我对渲染表单的代码如下：

$("#savenewlang").click(function(e) {
    console.log("savenewlang has been clicked");
});

所以当他们点击提交按钮时，应该只是console.log，但它没有运行。

有任何想法如何重新加载DOM或分配一个实际事件来正确触发？

- Peter

Answer 1

$("#container").on('click', '#savenewlang', function(e) {
    console.log("savenewlang has been clicked");
});

在页面加载时，#container 指向 #savenewlang 的父元素。

---

要使用 .on() 指定此事件，您需要三个参数。

.on(eventName, target, callback);

但是对于普通绑定，它只需要两个参数

.on(eventName, callback);

了解更多关于.on()的内容

---

剩余部分

将您的所有代码放在内部

$(document).ready(function() {

});

简而言之

$(function() {

});

- thecodeparadox

---

这个方法很好用，但是需要注意的是，如果不在$(document).ready()中包含它，它将无法正常工作。（显而易见）但我第一次使用时犯了错误。 - Peter

Answer 2

基本上的情况是当您动态向DOM添加内容时，您必须手动将处理程序附加到已添加的DOM元素。但是，如果您使用jQuery on()函数，则可以创建持久性事件处理程序。利用事件在DOM中冒泡的事实，当有人单击您的动态DOM元素（它没有单击事件处理程序）时，事件将冒泡到body元素，on()函数将确定实际单击的项是#savenewlang，然后调用您定义的function(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});

- Jason Kulatunga

---

抱歉，我正准备添加一些注释。 - Jason Kulatunga

Answer 3

当DOM元素尚不存在时，事件处理程序正在被添加。您可以尝试将其放入一个函数中：

function addEvent() {
    $("#savenewlang").click(function(e) {
        console.log("savenewlang has been clicked");
    });
}

在你动态添加表单后现在调用这个函数。

- Jeroen

Answer 4

由于元素是动态渲染的，您需要使用.delegate()方法来分配函数，如下所示：

$("body").delegate("#savenewlang", "click", function(e) {
    console.log("savenewlang has been clicked");
});

更多信息请参考参考文献：http://api.jquery.com/delegate/

- roggan87

---

根据文档：自jQuery 1.7起，.delegate()方法已被.on()方法取代。 - Blender

@blender superseded的意思是它会很快被移除吗？我们知道.live将不会存在于1.8中，但我相信.delegate将会存在于1.8以及之后的版本中。 - Kevin B

Supersede 的意思是取代。我相信它最终会被移除，但即使没有明确给出那个日期，使用 .on() 真的那么难吗？ - Blender

@Blender 感谢您指出，我忘记提到 .on() 方法了。 - roggan87