jQuery를 사용하면 둘 이상의 요소를 동적으로 추가 할 수 없습니다.

Question

ASP.NET을 사용하여 다중 파일 업 로더를 만들고 있는데 IE가 multiple 속성을 <input type="file"/> 내부에서 지원하지 않습니다.

그래서 사용자가 IE를 사용하는지 확인하는 jQuery 코드를 작성했습니다. 그렇다면 사용자가 두 개 이상의 파일 업로드 컨트롤을 추가 할 수 있도록 버튼을 표시하여 하나 이상의 파일을 업로드 할 수도 있습니다.

문제는입니다. 사용자가 해당 링크를 클릭하여 <input/> 컨트롤을 생성 한 다음 다시 클릭하면 세 번째를 추가 할 때 발생합니다. 아무 일도 일어나지 않는다! .. 단 하나의 컨트롤이 추가되어 사용할 두 개의 컨트롤이됩니다. 더 이상 아무리 많은 클릭을해도 더 이상 <input/> 컨트롤이 추가되지 않습니다. 여기

$(function() { 
    if (!('multiple' in document.createElement('input'))) { 
     var add_btn = $("<a href='#'>Add more photos</a>").insertAfter("#ContentPlaceHolder1_upload_lbl"); 
     var upload_pnl = $('<input type="file" runat="server"/>'); 
     var upload_holder = $("#fileinput_placeholder"); 
     add_btn.on("click", function() { 
      upload_holder.append(upload_pnl); 
      alert("click event called(debugging)"); 
     }); 
    } 
}); 

그 부분의 노드 트리의 사진입니다 : 당신이 upload_pnl를 추가하는 클릭 이벤트에

Answer 1

, 각각의 연속이 당신이 클릭 여기

내 코드입니다 동일한 요소를 추가하므로 결과가 2가됩니다.

더 추가하려면 el 클릭 이벤트 콜백 내부에서 작업하거나, jquery clone 함수와 같은 것을 사용하여 새로운 이벤트 콜백을 생성 할 수 있습니다. FSCAN가 RUNAT = "서버"를 지적 페이지가 이제 클라이언트 측 그대로

var upload_pnl = $('<input type="file" runat="server"/>'); 
var upload_holder = $("#fileinput_placeholder"); 
add_btn.on("click", function() { 
    upload_pnl.clone().appendTo(upload_holder); 
    alert("click event called(debugging)"); 
}); 

또한 뒤에 코드에서이 새로운 요소에 액세스 할 수 있도록하지 않을 것입니다.

Answer 2

먼저, 추가 할 때마다 새 요소를 만들어야합니다. Append는 이전 상위 요소를 이동합니다. 둘째, runat = "server"afaik는 asp.net 특성이며 html에는 전혀 적용되지 않습니다. 자바 스크립트로 요소를 만들면 게시하고 물건을 채워야 할 것입니다.