javascript - 将 html 元素插入到先前动态插入的元素中？

Question

这是我的第一个问题，我一直在寻找许多研究的小线索，但没有找到任何答案，希望这不是一件愚蠢的事情。

我会尽量直截了当:我正在开发一个处理 xml 文件的网站(数据存储在数组中，然后显示并完全可编辑)。

到目前为止，尽管我发现了一些问题，但一切正常。

我在数组上循环以获取所有必需的字符串，然后创建 jQuery 对象(例如我附加到特定 div 的 $("<input id='xxx' value='yyy' />"))。

第一次启动时，我有一个空的#insertXml div(用我的html编写)。解析完我的 xml 文件并准备好数组后，我动态创建一个附加到我的 #insertXml 的 #content div，然后对于每个索引，我将其 key 写入 #keyInput"div 中(动态插入，仅一次)，然后是第一个#lang1 div 中的值(仍然是动态插入)，#lang2 div 中的第二个值，等等

lang1、lang2等都是变量，所以写成:

 $("<input .../>").appendTo("#"+langN); 

其中 langN 在每个循环中发生变化。

一切正常!...在第一次显示时:/

问题是，当我使用创建新数据的函数时。我首先在模式窗口上工作，通过监听器函数检索用户值，然后将其传递给另一个函数，将其推送到我的数组中。我调试了它，有效，我的数组已正确更新。

然后我想简单地刷新我的页面，因此我尝试以与之前对整个数据所做的相同的方式附加一些输入。

它可以在我的 #keyInput div 上正常工作，但不能在我的 #lang div 上正常工作!？!？!无论我如何尝试(甚至忘记 jQuery 并使用 html document.xxx 函数)，都没办法。

在调试时，我的所有变量都正常，但在执行“appendTo”时它什么也不做，除了一次针对 keyInput div 的操作。

然后我尝试删除 #content div 并重新启动整个 displayInit() 方法(繁重的操作，但只是为了看看)和同样该死的问题:只有 #keyInput 被正确刷新。

我读到的唯一可能有趣的是，动态创建的元素(通过脚本)没有在 DOM 中注册，因此无法找到它。但在这种情况下，我的所有显示尝试都不起作用，所以？

预先，非常感谢您关心我的噩梦。

附:我的html + JS函数。 my DOM

function displayInsert() {

    var firstLang = stripXmlExtension(paths[0]); // same keys on every language, so we grab the 1st one
    var lastKeyIndex = mapXml[firstLang].key.length - 1;
    var keyToInsert = mapXml[firstLang].key[lastKeyIndex]; // == last insertion

    var inputKey = "<input size=35 type=text id=k" + lastKeyIndex + " value=" + stripHTML(keyToInsert.replace(/ /g, " ")) + " readonly />";
    // while appending tag to the HTML content page, we add a dblclick listener that will morph the input into a textarea when double dblclicked
    $(inputKey).css("margin-bottom", "15px").dblclick(function (e) {
        e.preventDefault();
        tempEditId = $(this).attr('id');
        $(".modal-body").html("<textarea cols='65' rows='10' id='txt" + $(this).attr('id') + "'>" + $(this).val() + "</textarea>");
        $("#modalEdit #btn-correct").css("display", "none");
        $("#modalEdit").modal({backdrop: "static"});
    }).appendTo("#keyInput");


    for (var i = 0; i < paths.length; i++) {
        var lang = stripXmlExtension(paths[i]);
        var lastValueIndex = mapXml[lang].value.length - 1;
        var valueToInsert = mapXml[lang].value[lastValueIndex]; // == last insertion


        var inputValue = "<input size=35 type=text id=" + lang + "---" + lastValueIndex + " value=" + stripHTML(valueToInsert.replace(/ /g, " ")) + " readonly />";
        // while appending tag to the HTML content page, we add a dblclick listener that will morph the input into a textarea when double clicked
        $(inputValue).css("margin-bottom", "15px").dblclick(function (e) {
            e.preventDefault();
            tempEditId = $(this).attr('id');
            $(".modal-body").html("<textarea cols='65' rows='10' id='txt" + $(this).attr('id') + "'>" + $(this).val() + "</textarea>");
            $("#modalEdit #btn-correct").css("display", "none");
            $("#modalEdit").modal({backdrop: "static"});
        }).appendTo("#" + lang);

    }

}

Answer 1

天哪，我很羞愧。

我的问题来自于模态窗口中生成的输入，该输入采用重复的相同 ID...我希望它会更复杂一点^^

解决了!