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});