jquery - jQuery重新加载DOM？

Question

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

我的问题是新创建的表单不响应任何 jQuery 命令。这是我目前用于渲染表单的代码。

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

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

知道如何重新加载 DOM 或分配一个正确触发的实际事件吗？

Answer 1

$("#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() {

});

Answer 2

基本上发生的事情是，当您动态地将内容添加到 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});

Answer 3

由于元素是动态呈现的，因此您需要使用 .delegate() 方法顶部分配函数，如下所示：

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

有关更多信息，请参阅参考：http: //api.jquery.com/delegate/

Answer 4

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

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

现在在动态添加表单后调用此函数。