如何动态生成元素

Question

I use the jQuery plugin dForm to dynamically generate form fields.

For events, I know I can access those fields with

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

But if I want to, say

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

Then how do I do that? I've tried

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

Even though I don't really understand what it does, to no avail.

Thanks.

Answer 1

I believe there's some confusion on what the event delegation is actually doing. The reason you're using .on() is because the event handler is being processed at DOM ready but your dynamic element doesn't exist. Now, when you're going to append to dynamic content, there's no need for event delegation, since when you run the append command, you should be targeting an element that exists on the page, whether it be dynamically or there from the start.

So, say you create a div dynamically with the ID of test . You can append to this div with a simple $("#test").append("<span>see, new span</span>"); , since by the time you run this command, the element exists. I hope this helps.

Answer 2

This works because it's responding to an event :

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

The reason is because events traverse the entire DOM structure, from the specific element all the way up to the parent document/window. So in this case jQuery assigns the event listener to the document instead of the element, and then filters events by the selector. So even if elements are dynamically added after the fact, they'll still be caught because they still pass their events up to document .

This, however, isn't responding to an event:

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

This is just selecting an element, performing an action, and then it's done. So if that element isn't on the DOM, that action isn't performed.

There's really no way around this. If you want every $('#id') to append a '<div></div>' then any time you remove the id element and re-add it, you need to call that line of code again.

Answer 3

Your question is not clear enough but only from a guess I think you want to dynamically add a div and also want to register an event for that div , if this is the case then you may do it like this way too, but there are other ways as well.

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

DEMO.

Another approach to do this (Keep the event handler registered like this using #test )

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

Insert the new div

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

DEMO.

Also, if you want to dynamically create/insert a new div and want to trigger the click event on this new div just right after you insert it, then you may try this

$(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.