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

참고 : 가져온 문서의 일부 요소를 삽입 할 이유는 그 렌더링되지 않고 표시되지 않습니다 . 보통 우리는 반대 방향으로 작업을 수행합니다.