Вставить элемент html в ранее динамически вставленный элемент?

Question

Вот мой первый вопрос здесь, я искал небольшую подсказку во многих исследованиях, но не нашел ответа, надеюсь, что это не глупо.

Я постараюсь быть прямым: я работаю над сайтом, работающим с файлами xml (данные хранятся в массиве, а затем отображаются и полностью редактируются).

До сих пор и несмотря на некоторые проблемы, которые я выяснил, все работает нормально.

Я петлю на свой массив, чтобы получить всю необходимую строку, затем создайте объект jQuery (например, $("<input id='xxx' value='yyy' />"), который я добавляю к определенному div).

При первом запуске у меня есть пустой #insertXml div (написанный в моем html). Один мой XML-файл разобран и мой массив готов, я динамически создаю div #content, прикрепленный к моему #insertXml, а затем для каждого индекса у меня будет свой ключ, записанный в div (динамическая вставка #keyInput) только один раз), тогда первое значение в # lang1 DIV (еще динамическая вставка), 2-й в # lang2 DIV и т.д.

lang1, lang2 и т.д. являются переменными, так написано:

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

где изменения langN на каждом цикле .

Все работает FINE! ... на 1-м дисплее:/

Проблема в том, что я использую свою функцию, которая создает новые данные. Я работаю сначала в модальном окне, чтобы получить пользовательские значения через функцию прослушивателя, а затем передать его другой функции, которая толкает ее в моем массиве. Я отлаживал его, что работает, мой массив правильно обновлен.

Затем я хочу просто обновить свою страницу, поэтому я стараюсь, как и раньше, использовать все свои данные, чтобы добавить несколько входов.

Он корректно работает на моем #keyInput div, но НЕ на моих #lang divs!?!?! Независимо от того, как я пытаюсь (даже забыв jQuery и используя html document.xxx функции), никак.

Во время отладки все мои переменные в порядке, он просто ничего не делает при выполнении «appendTo», за исключением одного раза для keyInput div.

Я попытался удалить div #content и перезапустить весь метод 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

OMG, мне стыдно.

Моя проблема возникла из входа, генерируемого в окне модальное, которые имели один и тот же идентификатор, который был дублирован ... Я надеялся, что это будет немного сложнее ^^

Решено!