동적으로 추가 된 요소에로드 된 스크립트를 적용하는 방법은 무엇입니까?

저는 Jquery를 처음 접하고 배우고 있습니다. 나는 새 텍스트 필드를 동적으로 추가하는 버튼이있는 매우 간단한 html 파일을 만들었습니다. 내가 직면 한 문제는 새로운 텍스트 필드가 추가되면로드 된 "viettypingplus.js"스크립트로 베트남 문자를 입력 할 수있는 첫 번째 텍스트 필드로 동작하지 않는다는 것입니다. 이 스크립트는 "텍스트 필드 추가"버튼을 통해 동적으로 추가되는 두 번째 텍스트 필드에서는 작동하지 않습니다.동적으로 추가 된 요소에로드 된 스크립트를 적용하는 방법은 무엇입니까?

나는 검색했지만 해결책을 찾지 못했습니다. 도와주세요.

다음은 내 html : 첫 번째 텍스트 입력란에 "a6"을 입력하면 "â"가 표시되지만 두 번째 텍스트 입력란에는 "a6"이 표시됩니다.

Thanh 대단히 도움을 주시기 바랍니다. viettypingplus.js 코드를 찾고에서

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Welcome - {% block title %}{% endblock %}</title> 

    <title>Viettyping Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style> 
    ., body, td, th { font-family:Arial; } 
    </style> 

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://vietdev.sourceforge.net/jscript/viettyping/viettypingplus.js"></script> 
    </head> 

    <body bgcolor="#F0F0D0"> 

    <center> 
     <h3>Vietnamese Typing</h3> 
     <form id="TestForm"> 
     Text input: <input name="xxx"> 
     <input id="AddText" value="Add Text Field" onclick="" type="button"> 
     </form> 
    </center> 

    <br> 

    <script> 
     $("#AddText").click(function(e){ 
      $("#TestForm").append($('<td><b>Text input: <input name="test" type="text"/></b></td>')); 
     }); 
    </script> 

    </body> 
</html>

출처

2014-08-31 H. Pham

새 요소를 추가 한 후에 [플러그인] (http://vietdev.sourceforge.net/jscript/viettyping/)을 다시 실행해야 할 수 있습니다. – Blazemonger

@ jfriend00 당신은 의견보다는 대답으로 제안을 넣어야합니다. – drewish

@drewish - 네 말이 맞아. 나는 대답을 추가했다. – jfriend00

, 나는 새로운 동적으로 생성 된 요소를 추가하기위한 어떠한 지원도 표시되지 않습니다. 이 코드는 초기화시 관련 입력 필드를 한 번만 찾는 것처럼 보이며 새로운 요소를 찾기 위해 다시 호출 할 수있는 쉬운 방법이 없습니다. 내가 생각할 수있는 몇 가지 옵션을 잎

한 가지 가능한 해결 방법은 페이지의 추가 요소의 수를 넣을 수 있지만, 그들이 처음 display: none에 숨겨진입니다. 그런 다음 viettypingplus.js은 초기화 될 때 연결됩니다. 그런 다음 다른 요소가 필요할 때 기존 숨겨진 요소 중 하나만 표시 할 수 있습니다.
viettypingplus.js을 수정하여 이미 추가 된 요소를 추적하고 (초기화되었을 때 각 요소에 속성을 추가하여) 초기화 기능이 이미 처리 한 요소를 피하도록 할 수 있습니다 이미 그 재산을 가지고있다). 이렇게하면 새 요소를 삽입 한 후 초기화 함수를 다시 호출 할 수 있으며 이미 처리되지 않은 요소에 연결됩니다. 당신이 수동으로 함수 호출로 생성 각각의 새로운 <input> 또는 <textarea> 요소를 연결 할 수처럼
조금 더 viettypingplus.js 코드를 공부 한 후, 그것은 보인다. 당신이 당신의 코드를 변경할 수 있습니다

<script> 
    $("#AddText").click(function(e){ 
     $("#TestForm").append($('<td><b>Text input: <input name="test" type="text"/></b></td>')); 
     // manully hook up viet processing on this last field we created 
     tEvt($("#TestForm input").last().get(0)); 
    }); 
</script>

참고로, 당신은 정말 당신의 폼에 <td>를 추가 할 의미합니까? 표시 한 코드에 이 없으므로 <td>이 속합니다.

출처

2014-08-31 05:07:16 jfriend00

빠른 답변 주셔서 감사합니다. 두 번째 해결 방법을 정말 좋아하지만 구현 방법을 모릅니다. 이 작업을 수행하는 모든 문서/게시물/예제를 알고 계십니까? 다시 한 번 귀하의 도움에 감사드립니다. –

@ H.Pham - 위의 제 3의 새로운 옵션을 참조하십시오. 코드를 더 공부 한 후에는 수동으로 함수 호출을 만들어 새로 추가 한 요소를 연결할 수 있다고 생각합니다. – jfriend00

jfriend00, 도와 주셔서 대단히 감사합니다. 세 번째 옵션은 완벽하게 작동하며 많은 코드가 필요하지 않습니다. –

동적으로 추가 된 요소에로드 된 스크립트를 적용하는 방법은 무엇입니까?

답변

관련 문제