以前に動的に挿入された要素にhtml要素を挿入しますか？

Question

ここに私の最初の質問ですが、私は多くの研究で小さなヒントを探していましたが、答えが見つからなかったので、愚かなことではないことを願っています。

私は真っ直ぐにしようとしています：XMLファイルを扱うウェブサイトで作業しています（データは配列に格納され、完全に編集可能です）。

これまでのところ、いくつかのトラブルにもかかわらず、すべてうまくいきました。

すべての必要な文字列を取得するために私のループをループし、jQueryオブジェクトを作成します（$("<input id='xxx' value='yyy' />")など、特定のdivに追加します）。

最初は空の#insertXml div（HTMLで書かれています）があります。 1つのmy xmlファイルを解析して配列を準備したら、#insertXmlに#content divを追加してダイナミックに作成し、各インデックスに対して#keyInput "div（ダイナミックインサート、1回のみ）などなど＃のlang1のDIV（まだダイナミック挿入）で第一値、＃のlang2 divの中に第二、

lang1、lang2、それが書かれているので、変数です：

langNは、各ループに変更

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

を

すべてがうまくいきます！...第1ディスプレイ：/

新しいデータを作成する関数を使用しているときに問題が発生します。 私は最初にモーダルウィンドウを操作して、リスナー関数からユーザー値を取得し、それを配列にプッシュする別の関数に渡します。 私はそれをデバッグした、私の配列が正しく更新されます。

私は単純にページをリフレッシュしたいので、前にデータ全体に対して行ったのと同じ方法で、いくつかの入力を追加しようとします。

#keyInput divでは正常に動作しますが、#lang divでは正しく動作しません。 どのように（たとえjQueryを忘れて、html document.xxx関数を使用して）しようとしても、方法はありません。

デバッグ中は、すべての変数はOKですが、「appendTo」を実行しても何もしません。ただし、keyInput divの場合は1回です。

#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

OMG、私は恥ずかしいです。

私の問題は、私はそれがもう少し複雑になります期待していた^^解決

...複製されたのと同じIDを取ったモーダルウィンドウで生成された入力から来ました！デバッグの助け求めて（「なぜこのコードは動作しないの？」）