URL에 추가 입력을 추가하십시오. jquery를 사용하여 클릭하십시오.

Question

사용자가 링크를 클릭하여 추가 파일 업로드 입력 필드를 추가 할 수있는 UI 양식을 사용하고 있습니다. 초기 옵션.

두 가지 :

1. 가 도움이되지만 수 없습니다 내가 할 노력하고있어 할 수있는 쉬운 방법이 있어야한다고 생각합니다. Javascript는 결코 내 강한 양복 중 하나가 아니며 아마 먼 길을가는 것입니다.
2. 몇 가지 이유 때문에 해결책이 생겼습니다. 하나의 추가 필드 만 추가 할 수 있으며 더 이상 작업을 중지하지 않습니다. 링크를 클릭 할 때마다 다른 필드가 추가되기를 원합니다. 한 번만이 아닙니다.

아래 코드는 내가 사용하고있는 코드입니다. 나는 당신이 이미 시도한 것을 볼 수 있도록 코멘트에 남겼습니다.

jQuery를 :

// add and remove addtional image upload inputs 
    jQuery('#add_image_upload_field').click(function(e) { 

    e.preventDefault(); 

    var newInput = '<input type="file" class="fullwidth" name="upload_attachment[]" />'; 

    // jQuery(this).prev().append(newInput).slideDown('slow'); 
    // jQuery('#upload_image input').filter(':last').append(newInput).slideDown('slow'); 
    // jQuery('input[name="upload_attachment[]"]').filter(':last').append('newInput'); 
    // jQuery('input[name="upload_attachment[]"]').append('newInput'); 

var addLink = '<a href="#" id="add_image_upload_field">Add another image input field</a>'; 

jQuery(this).parent().append(newInput); 
jQuery(this).remove(); 
jQuery('#upload_image').append(addLink); 

}); 

HTML :이 페이지의 수십에서 수행하지만, 그냥 동작하지 않습니다 본 적이

<!-- Upload a picture --> 
<fieldset name="upload_image" id="upload_image"> 
    <label for="upload_image">Upload pictures:</label> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 

    <a href="#" id="add_image_upload_field">Add another image input field</a> 
    <!--<input type="button" id="add_image_upload_field" value="Add another image input field" />--> 

</fieldset> 

; 어떤 도움을 주셔서 감사합니다.

Answer 1

요소를 바꾸거나 추가하면 해당 요소에 연결된 이벤트가 사라집니다. 따라서 새 이미지를 추가하고 이벤트 핸들러를 연결하려면 페이지가로드 될 때 이미있는 요소에 위임해야합니다. 마찬가지로 :

jQuery(document).on('click','#add_image_upload_field', function(e) { 

데모 here