Jquery Select Dynamically added element

Question

Several similar question exist, but after fighting with this for a day or so I feel the need to ask because the vast majority of the answers refer to adding event handlers to elements.

I am not interested in adding an event handler to the elements in question, rather I am interested in adding additional dynamic content to dynamically generated content.

The app works thusly: load a modal form dynamically upon the click of a static element (working properly)

function loadModal(target,modalId) {
    console.log("==================> loadModal() Entry");
    $.ajax({
        type: "GET",
        url: 'http://localhost/retrieve-modal/'+modalId,
        success : function (text) {
            $("#"+modalId)[0].innerHTML = text;
            modalSaveIntercept($("#"+modalId)[0])
        },
        failure : function (e) {
            console.log("something is wrong");
        }
    })
}

Then I have a save interceptor that overrides the default save behavior of my form here this is also working properly, (I suspect because I am loading this event handler at the time of loading the modal)

function modalSaveIntercept(eventTarget) {
    if(eventTarget.hasChildNodes()) {
        eventTarget.childNodes.forEach(function(e) {
            if(e.tagName == "FORM") {
                console.log("found the form: " + e.id + " applying save override listener");
                $("#"+e.id).submit(function(event){
                    event.preventDefault();
                    submitForm(e);
                });
                modalSaveIntercept(e)
            }
        });
    }
}

the above attaches a listener to the form loaded into my modal and rather than firing the default behavior of a Save button click, it fires my submitForm() function which is here:

function submitForm(form) {

    let payload = constructPayloadFromFormData(form);

    validate(payload).then(function(v) {
        console.log("response Data:");
        for(let p in v) {
            if(v.hasOwnProperty(p)) {
                constructInvalidFeedbackForProperty(p,v[p])
            }
        }
    });
}

this function constructs a payload from the form data (working fine) then executes another ajax call inside of validate() - I wait for the return call from ajax and then iterate through an array of validation data to confirm the form's validity. However, here is where the problem is:

function constructInvalidFeedbackForProperty(prop,e) {
    let el = $("#" + "ic-role-" + prop);
    console.log(el);
    el.append("<div class=\"invalid-feedback\">problem</div>");
}

the problem is the append - I cannot seem to fire that method. I can select the element as the console.log(el) writes to the log the correctly identified element in my dom.

What am I doing wrong?

I have created a contrived jsfiddle for a sample of the problem. I actually believe it may be that an input field is not something you can append to... perhaps? https://jsfiddle.net/jtango/xpvt214o/987051/

Answer 1

Okay, I messed around with your fiddle a bit. If you inspect the input element that is created you can see that your append does work. It's just not displaying. If you are trying to edit what is in the input box then you must use val()

Here is a copy of your fiddle that will display inside the input:

$("#top").on("click", function(){
  $("#form").append("<label>some label: </label><input type=\"text\" id=\"myinput\">");
});

$("#btm").on("click",function(){
    $("#myinput").val("<div>I will not appear</div>");
});

Answer 2

As your shared https://jsfiddle.net/jtango/xpvt214o/987051/ It will not appear, this is wrong way to append any HTML element inside "input box" or any of form elements. it should allow to set only new attribute or value.

check screenshot: https://i.stack.imgur.com/4FBgn.png

So verify your below code if it's similar then it will not work:

let el = $("#" + "ic-role-" + prop);
console.log(el);
el.append("<div class=\"invalid-feedback\">problem</div>");