dynamically appending elements on dynamically created elements

Question

I have a modal with dynamic content. e.g. I can create an item by typing someting in a textbox and hit enter. After I hit enter I want a notification below the textbox, which itself was dynamically created.

normally I'd just put this in my .js.erb

$("#idOfTextbox").append("some waring")

but as I mentioned the textbox with id: idOfTextbox was created dynamically and because of that this approach doesnt work.

I read plenty about this and I think I roughly understand the problem, normaly you'd do something like this

$(document).on("click", "#idOfTextbox", function(){
  $(this).append("some warning");
};

but I don't really want to bind it to a specific event, I just want to append the message when the controller renders the .js.erb file

I thought mb something like .on("load", might work, but I had no success so far.

I'd really appreciate any help.

Answer 1

Try this :

$('body').append("<div id='idOfTextbox'></div>");
$(document).find('#idOfTextbox').append("some value");

Example : https://jsfiddle.net/DinoMyte/2rhasve1/2/