DOM 수정 후 jQuery 플러그인을 다시 실행하는 방법은 무엇입니까?

Question

파일 업로드 상자가있는 양식이 있고 jQuery Filestyle 플러그인 (http://www.appelsiini.net/projects/filestyle)을 사용하여 입력 스타일을 지정하고 있습니다. 또한 사용자가 양식을 제출하지 않고도 여러 파일을 업로드 할 수 있도록 간단한 JavaScript 기능이 있습니다. 초기 파일 업로드 입력이 완벽 해 보이지만 사용자가 추가 파일 업로드 버튼을 클릭하고 새 입력을 만들면 전혀 스타일이 적용되지 않습니다. 플러그인이 이미 페이지로드시 실행되고 DOM을 수정하면 새로운 스타일에 적용되지 않기 때문입니다.

그래서 문제가 있다고 가정하면, 새로 작성된 파일 입력에 대해 Filestyle jQuery를 불러올 수있는 방법이 있는지 의문이 생깁니다.

<script src="/scripts/jquery.filestyle.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("input.file").filestyle({ 
      image: "/images/btn_select_file.gif", 
      imageheight : 24, 
      imagewidth : 115, 
      width : 275, 
     }); 
    }); 
    </script> 

그리고 내 자바 스크립트 DOM 조작 : 어떤 조언을

<script type="text/javascript"> 
var fileCounter = 1; 
function addFile() { 
    fileCounter++; 
    var newdiv = document.createElement('div'); 
    newdiv.id = 'file' + fileCounter; 
    newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>'; 
    document.getElementById("files").appendChild(newdiv); 
    document.getElementById("filecount").value = inputCounter; 
} 
</script> 

감사

은 여기 내 Filestyle jQuery 코드입니다! 당신이 newdiv을 만든 후

Answer 1

을 당신은 플러그인 있도록 새 function addFile() 기능을 할 수 있습니다 스타일을

같은 것을 알려 function addFile() 기능에 플러그인 메서드를 호출해야

function addFile() { 
    fileCounter++; 
    var newdiv = document.createElement('div'); 
    newdiv.id = 'file' + fileCounter; 
    newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>'; 
    document.getElementById("files").appendChild(newdiv); 
    document.getElementById("filecount").value = inputCounter; 
    $("input.file").last().filestyle({ 
      image: "/images/btn_select_file.gif", 
      imageheight : 24, 
      imagewidth : 115, 
      width : 275, 
     }); 
} 

$("input.file").last()은 새로 추가 된 파일 입력을 선택하고 이에 대한 플러그인을 초기화하여 스타일을 추가합니다. (나는 실제로 시험하지 않았다 비록)

Answer 2

물론, 그냥이 추가 :

$(newdiv).filestyle({ 
    image: "/images/btn_select_file.gif", 
    imageheight : 24, 
    imagewidth : 115, 
    width : 275, 
}); 

Answer 3

나는

<script type="text/javascript"> 
var inputCounter = 1; 
function addFile() { 
    inputCounter++; 
    var newdiv = document.createElement('div'); 
    newdiv.id = 'file' + inputCounter; 
    newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>'; 
    document.getElementById("files").appendChild(newdiv); 
    document.getElementById("filecount").value = inputCounter; 
    $('#'+file_'+inputCounter).filestyle({ 
     image: "/images/btn_select_file.gif", 
     imageheight : 24, 
     imagewidth : 115, 
     width : 275, 
    }); 
} 
</script> 

는 또한, 당신의 변수 "fileCounter는"아마 당신에게 문제를 일으키는 "inputCounter"밖으로 전환 할 것 같은 것을 시도 할 것이다.