2017-04-15 68 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'); 

注:我不明白为什么你想导入文档中插入一些元素,未呈现。通常我们以相反的方向进行操作。

相关问题