2017-04-15 58 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

所以你不能用jQuery庫使用.appendTo("#maincontent")來選擇它。

相反,你應該選擇它你#background一樣的工作方式:

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

注:我不明白爲什麼你想導入文檔中插入一些元素,未呈現。通常我們以相反的方向進行操作。