페이지로드 후 추가 된 요소에서 입력 값을 검색하려면 어떻게해야합니까?

Question

저는 젠드 프레임 워크 1.12와 함께 작업하고 있는데, 서브 폼에서 필드를 동적으로 추가 및 삭제할 수 있어야합니다.이 경우에는 부모 "프로모션"에 하이퍼 링크를 연결하고 있습니다.

나는 Zend를 통해 요소를 동적으로 추가하고 제거하는 방법을 찾지 못했고, 이것을 수행했다고 주장한 희귀 한 튜토리얼은 반세기가 넘었고 시도 할 때 작동하지 않습니다.

그래서 Zend Hidden 입력 필드에서 작업해야하는 링크를 저장 한 다음 제출 한 후 JSON 데이터를 처리합니다. 별로 효율적이지는 않지만 지금까지 내가해온 유일한 방법입니다.

이

이 같은 형태의 가정 : 다음

내가 함께 일하고 있어요 코드의 섹션

<form action="/promos/edit/promo_id/15" method="POST" id="form_edit"> 
    <!-- input is Zend_Form_Element_Hidden --> 
    <input type="hidden" id="link_array" value="{ contains the JSON string }"/> 

    <button id="add_link">Add Link</button> 
</form> 

목적입니다 링크 추가 버튼을 누를 때마다 것을, 양식 필드를 추가합니다 사용자가 특정 항목과 관련된 새로운 하이퍼 링크를 입력 할 수있게합니다.

다음은 함수의 : 나는의 링크 이름 및 HTTP 기준을 가지고 JSON 개체에 배치하는 모든 new_link 클래스 요소에 제출되어 무엇을해야하는지 이제

// add links 
$('#add_link').click(
    function(e) { 
     e.preventDefault(); 
     link = '<div class="p_link new_link">' + 
        '<div class="element_wrap">' + 
        '<label for="link_name" class="form_label optional">Text: </label>' + 
        '<input type="text" id="new_link_name" name="link_name"/>' + 
        '</div>' + 
        '<div class="element_wrap">' + 
        '<label for="link_http" class="form_label optional">http://</label>' + 
        '<input type="text" id="new_link_http" name="link_http"/>' + 
        '</div>' + 
        '<div class="element_wrap">' + 
        '<button class="submit delete_link">Delete</button>' + 
        '</div>' + 
       '</div>'; 

     $('#add_link').prev().after(link); 
    } 
); 

.

$('#submit').click(
    function(e) { 
     e.preventDefault(); 
     var link_array = []; 

     var new_links = document.getElementsByClassName('new_link'); 
     $.each(new_links, function() { 
      console.log(this); 
      var n = $(this).children('#new_link_name').text(); 
      console.log(n); 
      link_array.push({'link_name':n}); //'link_http':h 
     }); 
     console.log(JSON.stringify(link_array)); 
    } 
); 

내 문제가 있다는 것입니다 : 여기에 지금까지 그것을 가지고 코드입니다 (저는이 시점에 대표를 모두 입력 필드가없는 알고) var new_links = document.getElementsByClassName('new_link'); 모든 새로 추가 된 new_link 요소를 수집을하지만, 텍스트 필드에 입력 된 값을 가져 오지 않습니다.

필자는 입력 필드의 값 속성에 어떤 입력 값을 어떻게 바인딩 할 수 있는지 알아야합니다. 지금은이 새로운 요소에 입력 한 모든 것이 밖으로 던져지기 때문에 필드가 비어 있지만 아무것도 표시되지 않기 때문입니다.

Answer 1

$('#submit').click(
    function(e) { 
     e.preventDefault(); 
     var link_array = []; 

     var new_links = $('.new_link'); 
     $.each(new_links, function() { 
      console.log(this); 
      var n = $(this).find('input').val(); // you need input values! This line //is changed... 
      console.log(n); 
      link_array.push({'link_name':n}); //'link_http':h 
     }); 
     console.log(JSON.stringify(link_array)); 
    } 
); 

JSFIDDLE : http://jsfiddle.net/DZuLJ/

편집 : (당신이 링크의 이름을 원하는 HTTP의 경우, 각 입력 클래스 및 대상 클래스를 만드는)