javascript - 如何动态生成元素

Question

我使用 jQuery 插件 dForm 来动态生成表单字段。

对于事件，我知道我可以访问这些字段

$(document).on("click","#id", function(){});

但如果我想，说

$("#id").after("<div></div>");

那我该怎么做呢？我试过了

$("#id").after("<div></div>").trigger("create");

尽管我真的不明白它的作用，但无济于事。

谢谢。

Answer 1

我相信对于事件代表团实际在做什么存在一些混淆。您使用的原因.on()是因为事件处理程序正在处理 DOM 准备好但您的动态元素不存在。现在，当您要附加到动态内容时，不需要事件委托，因为当您运行append命令时，您应该定位页面上存在的元素，无论它是动态的还是从一开始就存在。

因此，假设您使用 ID 动态创建了一个 div test。您可以使用 simple 附加到此 div $("#test").append("<span>see, new span</span>");，因为当您运行此命令时，该元素已存在。我希望这有帮助。

Answer 2

这是有效的，因为它正在响应一个事件：

$(document).on('click', '#id', function(){});

原因是事件遍历整个 DOM 结构，从特定元素一直到父文档/窗口。所以在这种情况下，jQuery 将事件侦听器分配给document而不是元素，然后通过选择器过滤事件。因此，即使元素是事后动态添加的，它们仍然会被捕获，因为它们仍然将事件传递给document.

但是，这不响应事件：

$('#id').after('<div></div>');

这只是选择一个元素，执行一个动作，然后就完成了。因此，如果该元素不在 DOM 上，则不会执行该操作。

真的没有办法解决这个问题。如果您希望在任何时候删除元素并重新添加它时都$('#id')附加 a then，则需要再次调用该代码行。'<div></div>'id

Answer 3

您的问题还不够清楚，但仅从猜测中我认为您想动态添加 adiv并且还想为此注册 an event，div如果是这种情况，那么您也可以这样做，但是还有其他方法.

$("#id").after($("<div/>", {
    'id':'test',
    'click':function() { alert ("Clicked!"); }
}));

演示。

另一种方法来做到这一点（保持事件处理程序像这样使用注册#test）

$(document).on("click", "#test", function(){
    alert ("Clicked!");
});

插入新的div

$("#id").after($("<div/>", { 'id':'test'}));

演示。

此外，如果您想动态创建/插入一个新的div并想在插入后立即触发click这个新的事件div，那么您可以试试这个

$(function(){
    $(document).on("click","#test", function(){
        alert ("Clicked!");
    });

    // insert a new div with id 'test' and invoke click event immediately
    var div = $("<div/>", { 'id':'test'});
    $("#id").after(div);
    div.trigger('click');
});

演示。