2013-10-24 3 views
-1

HTML 페이지에서 요소를 동적으로 조작하려고하는데 문제가 발생했습니다.
요소를 추가하거나 제거 할 수 있었지만 갑자기 더 이상 사용할 수 없습니다. 내가 여기서 뭔가 잘못하고 있어야합니다
...
JQuery가 html 요소를 동적으로 추가하지 않습니다.

<div id="multiUploaderTop"> 
    <div><input type="button" value="add more files" id="buttonAddFile1"></div> 
    <div id="multiUploaderContainer"> 
    <div><input type="file" name="attachment"/></div> 
</div> 
</div> 

위의 내가 조작 할 HTML의 작품이다.
아래는 제가 실행하고있는 jquery 스크립트입니다.
내가 뭘 잘못하고 있니?

<script type="text/javascript"> 
$(document).ready(function(){ 
    alert("doc ready"); 
    initMultiUpload(); 
}); 

function initMultiUpload(){ 
    $("#buttonAddFile1").bind("click", function(){ 

     try{ 
      addNewFileRow(); 

     }catch(exception){ 
      alert(exception.message); 
     } 


    }); 
} 

function addNewFileRow(){ 
    try{ 
     alert("adding new file row"); 
     var container = $("#multiUploadContainer"); 
     var div = document.createElement("div"); 
     var fileInput = document.createElement("input"); 
     $(fileInput).attr("type", "file"); 
     $(fileInput).attr("name", "attachment"); 
     $(div).append(fileInput); 
     $(container).append(div); 
    }catch(ex){ 
     alsert(ex.message); 
    } 
} 
</script> 
+1

jquery 복제본을 찾으려면 다음을 확인하십시오 .http : //api.jquery.com/clone/ – codebreaker

답변

3

당신은이 맞춤법 실수를 multiUploaderContainermultiUploadContainer

var container = $("#multiUploaderContainer"); 

데모 : Fiddle

,369 : Fiddle

그것은 간단하게 할 수 많은

function addNewFileRow() { 
    var container = $("#multiUploaderContainer"); 
    var div = $('<div />'); 
    var fileInput = $('<input />', { 
     type: 'file', 
     name: 'attachment' 
    }).appendTo(div); 
    container.append(div); 
} 

데모에

+0

우! 나는 너의 빠른 대답을 위해 너무 어리 석다. 그것은 오타였습니다. – Ascendant

관련 문제