2017-04-15 12 views
0

私の問題は、入力ボックスを追加しようとすると非アクティブになります。私はそれに何かを置くことができないということです。インポートされたDOM要素に入力を追加した後、無効になります

私はHTMLインポートを使用していると私は、インポート要素に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    
 
    <html lang="en" xmlns="http://www.w3.org/19enter code here99/xhtml"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>Feedback Form</title> 
 
     <link rel="import" href="background.html"> 
 
     <script type="text/javascript" src="jquery-3.1.1.js"></script> 
 
    <body> 
 
     <script> 
 
      var link = document.querySelector('link[rel=import]'); 
 
      var content = link.import.querySelector('#background'); 
 
      document.body.appendChild(content.cloneNode(true)); 
 
     </script> 
 
     <div id="email_form"> 
 
      <p>E-mail: <input type="email" id="email_from_email" name="email_from_email" /></p> 
 
     </div> 
 
     <script> 
 
    $("#email_form").appendTo("#maincontent"); //here I append input 
 
     </scrit> 
 
    </body> 
 
    </html>

background.htmlが

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="background.css" /> 
</head> 
<body> 
    <div id="background"> 
     <div class="background" id="menucontent"> 
      <!--some code here--> 
      </div> 
     </div> 
     <div class="background" id="maincontent"> 
      <!--An input is appendend but I can't put anything in--> 
     </div> 
    </div> 
</body> 
</html> 

答えて

1

要素#maincontentがメインではない入力を追加します文書index.htmlですが、インポートされた文書background.html

したがって、.appendTo("#maincontent")を使用してjQueryライブラリで選択することはできません。代わりに

あなたはそれをあなたが#backgroundでやったのと同じ方法を選択する必要があります。

var maincontent = link.import.querySelector('#maincontent'); 

注:インポートした文書内のいくつかの要素を挿入したい理由は、私はそれがレンダリングされていない、表示されていません。通常は、逆方向に操作を行います。

関連する問題