Question

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

对于活动，我知道我可以使用

访问这些字段

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

但如果我愿意，请说

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

然后我该怎么做？我试过了

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

即使我真的不明白它的作用，也无济于事。

感谢。

Answer 1

我认为事件授权实际上在做什么有些混乱。您使用.on()的原因是因为事件处理程序正在DOM准备好处理但您的动态元素不存在。现在，当您要附加到动态内容时，不需要事件委派，因为当您运行append命令时，您应该定位页面上存在的元素，无论是动态还是那里从头开始。

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

Answer 2

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

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

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

但是，这不响应事件：

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

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

真的没办法解决这个问题。如果您希望每个$('#id')附加一个'<div></div>'，那么只要您删除id元素并重新添加它，就需要再次调用该行代码。

Answer 3

您的问题不够明确，但只是猜测我认为您想动态添加div，并且还希望为event注册div，如果这是那么你也可以这样做，但也有其他方法。

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

DEMO.

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

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

插入新的div

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

DEMO.

此外，如果您想要动态创建/插入新的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');
});

DEMO.

如何动态生成元素

3 个答案: