这是我的第一个问题,我一直在寻找许多研究的小线索,但没有找到任何答案,希望这不是一件愚蠢的事情。
我会尽量直截了当:我正在开发一个处理 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);
}
}
最佳答案
天哪,我很羞愧。
我的问题来自于模态窗口中生成的输入,该输入采用重复的相同 ID... 我希望它会更复杂一点^^
解决了!
关于javascript - 将 html 元素插入到先前动态插入的元素中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38190632/