jQuery - DOM에 요소를 동적으로 추가하는 방법은 무엇입니까?

Question

페이지에 여러 텍스트 영역을 출력했습니다. 텍스트 영역에는 "확장 가능"클래스가 있습니다. 내 HTML 코드에서 Expandable textareas가 나온 직후 div를 출력하곤했습니다.

하드 코드는 : jQuery를 통해 이동하고 각 확장 텍스트 영역을 발견하고 그 후에 나의 카운트 DIV의 권리를 삽입하도록

<textarea id="NewContent" class="Expandable"></textarea> 
<div class="Count"></div> 

나는 그것을 변경하고 싶습니다. 이를 위해 다음 코드를 사용합니다 :

$(".Expandable").each(function() { 
    $(this).after("<div class='Count'></div>"); 
}); 

이것은 내가 필요한 것을 제공합니다. 하지만 ... 페이지를 만든 후에 페이지에 추가되기 때문에 div가 DOM에 추가되지 않습니다. 나는 그것이 일어날 필요가있다.

"라이브"를 사용해야하고 다른 곳에서 성공적으로 사용하고 있지만이 기능을 사용할 수없는 것으로 알고 있습니다.

$(".Count").live(); 

위의 텍스트 영역의 문자 수를 표시하는 데 count div가 사용됩니다. 키 업 또는 흐림과 같은 사용자 상호 작용은 발생하지 않습니다. 이 코드는 완벽하게 작동하기 때문에이 코드를 포함하지 않았습니다.

당신이 텍스트 영역에 입력 할 때

$(".Expandable").change(function() { 
    $(this).parent().next(".Count").html("Sunday"); 
}); 

는 다음 카운트 사업부는 "일요일"를 표시해야합니다 편집했다. 이것은 하드 코드 된 Count div와는 완벽하게 작동하지만 동적으로 생성 된 Count div에서는 작동하지 않습니다. 아마도 당신은 그들을 만들기 위해 몇 가지 CSS를 추가해야합니다,

백작 요소

http://jsfiddle.net/jeffreydev/qyuQS/ 추가 얻고있다 :

Answer 1

문제는 동적 요소 대 정적이 아니다.

$(this).parent().next(".Count").html("Sunday"); 

그것은 입니다 정적 버전과 같은 구조 작업 :

<div><textarea id="NewContent" class="Expandable"></textarea></div> 
<div class="Count"></div> 

그러나, 즉에 의해 만들어진 게 아니에요 문제는 원래 코드에서, 여기에 위치에 있습니다 :

$(".Expandable").each(function() { 
    $(this).after("<div class='Count'></div>"); 
}); 

위의 삽입 그것의 요소에 형제로 새로운 <div>에게 그래서 .after()이를 생성 한 후 즉시을 의미 한 후 삽입 : 그 구조와

<div> 
    <textarea id="NewContent" class="Expandable"></textarea> 
    <div class="Count"></div> 
</div> 

, 당신은 단순히 .parent() 전화, 그냥해야한다는 필요가 없습니다

$(this).next(".Count").html("Sunday"); 

You can test it out here합니다. 제쳐두고, 여러 요소에 .after() 작품, 그것이 나의 위의 예와 같이 간단한 될 수

---

: 당신은()`후론를 사용하는 경우

$(".Expandable").after("<div class='Count'></div>"); 

Answer 2

http://jsfiddle.net/EvikJames/qyuQS/2/ 내가 코드를 사용하여 jsfiddle을했다 :

나는이의 바이올린을 만들었습니다 나타나다?

편집 :

또는 당신이 확장 텍스트 영역의 당신의 DOM에 추가 찾으시는 것입니까? 그 밑에 카운트를 추가하고 싶습니까?

그래서처럼 할 것 그렇다면 :

http://jsfiddle.net/jeffreydev/qyuQS/1/

다시 편집 :

으로 다른 사람의 답변에 설명, 당신은 대상 확인 요소 내부의 HTML을 변경하기 위해 오른쪽 구조는 DOM 구조 내부에 있습니다. 여기

는 동작 예이다 http://jsfiddle.net/jeffreydev/qyuQS/12/

$(this).parent().next().html('Sunday'); 

Explaination ...가 즉시 ​​.after()이 실행 후 DOM에

$(this) // get the current element as a jquery object (the textarea). 
$(this).parent() // get the selected elements parent (the textarea's parent, the div) 
$(this).parent().next() // and get the element that is next to it in the dom structure (which is the .Count element)