Question

存在几个类似的问题，但是经过一天左右的争论之后，我感到有必要提出问题，因为绝大多数答案都涉及向元素添加事件处理程序。

我不希望将事件处理程序添加到有问题的元素中，而是希望将其他动态内容添加到动态生成的内容中。

该应用可以正常运行：单击静态元素即可动态加载模式形式（正常工作）

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");
        }
    })
}

然后我有一个保存拦截器，它可以覆盖表单的默认保存行为，在这里它也可以正常工作（（我怀疑是因为我在加载模式时正在加载此事件处理程序）

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)
            }
        });
    }
}

上面的代码将侦听器附加到加载到我的模式中的表单上，而不是触发“保存”按钮单击的默认行为，而是触发了我的SubmitForm（）函数，该函数位于此处：

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])
            }
        }
    });
}

此函数从表单数据构造有效负载（工作正常），然后在validate（）内部执行另一个ajax调用-我等待来自ajax的返回调用，然后遍历验证数据数组以确认表单的有效性。但是，这里是问题所在：

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

问题是追加-我似乎无法触发该方法。我可以选择console.log（el）将该元素写入到我的dom中正确标识的元素的日志中。

我在做什么错了？

我为问题的示例创建了一个人为的jsfiddle。我实际上认为，输入字段可能不是您可以附加的内容……也许？ https://jsfiddle.net/jtango/xpvt214o/987051/

Answer 1

好的，我把你的小提琴弄得一团糟。如果检查创建的input元素，则可以看到您的追加确实起作用。它只是不显示。如果您要编辑输入框中的内容，则必须使用python3 -m venv env source env/bin/activate

这是您的小提琴的副本，将显示在输入中：

val()

Answer 2

作为共享的https://jsfiddle.net/jtango/xpvt214o/987051/，它不会出现，这是在“输入框”内附加任何HTML元素或任何表单元素的错误方式。它应该只允许设置新的属性或值。

检查屏幕截图：https://i.stack.imgur.com/4FBgn.png

因此，请验证您的以下代码是否相似，否则将无法使用：

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

jQuery选择动态添加的元素

2 个答案: