2010-12-02 189 views
0

我試圖實現一些我在網站上找到的代碼,當你點擊一個href鏈接時,它會複製一個文件字段,代碼與網站幾乎完全一樣,但它根本不工作。jQuery - 動態添加字段字段

有人可以看看,讓我知道我哪裏會出錯。

完整的代碼如下:

的JavaScript

<script> 
$(
function(){ 
    var jAddNewUpload = $("#add-file-upload"); 

    jAddNewUpload 
     .attr("href", "javascript:void(0)") 
     .click(
      function(objEvent){ 
       AddNewUpload(); 

       objEvent.preventDefault(); 
       return(false); 
      } 
     ); 
} 
); 

function AddNewUpload(){ 
    var jFilesContainer = $("mpfiles"); 
    var jUploadTemplate = $("#element-templates div.row"); 
    var jUpload = jUploadTemplate.clone(); 
    var strNewHTML = jUpload.html(); 
    var intNewFileCount = (jFilesContainer.find("div.row").length + 1); 

    jUpload.attr("id", ("file" + intNewFileCount)); 

    strNewHTML = strNewHTML 
     .replace(
      new RegExp("::FIELD3::", "i"), ("mpfile[]") 
     ); 

    jUpload.html(strNewHTML); 

    jFilesContainer.append(jUpload); 
} 
</script> 

HTML

<div id="mpfiles"> 
    <div class="row"> 
     <label>Files:</label> 
     <div class="files-box"> 
      <div class="file sub-file"> 
       <input class="file-input-area" name="mpfile[]" type="file" size="32" value="" /> 
       <input readonly="readonly" class="text" type="text" value="click to upload" /> 
       <a href="#" class="button">view</a> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="element-templates" style="display: none;"> 
    <div class="row"> 
     <label>Files:</label> 
     <div class="files-box"> 
      <div class="file sub-file"> 
       <input class="file-input-area" type="file" name="::FIELD3::" size="32" value="" /> 
       <input readonly="readonly" class="text" type="text" value="click to upload" /> 
       <a href="#" class="button">view</a> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <label>&nbsp;</label> 
    <a href="" id="add-file-upload">Upload another file</a> 
</div> 

在那裏我得到了代碼的網站是在這裏http://www.bennadel.com/blog/1375-Ask-Ben-Dynamically-Adding-File-Upload-Fields-To-A-Form-Using-jQuery.htm

+0

這可能是有用的編輯這個並記的步驟,你已經嘗試來診斷問題。它會減少人們需要看自己的東西,同時也表明你不僅僅把它放在這裏讓我們去工作,因爲你是懶惰的。 – 2010-12-02 05:52:49

+0

因爲我不能爲你做,所以你可能還想仔細檢查你的代碼前面是否有正確的空格。 makrup語言正在尋找4個空格來決定什麼是代碼,什麼是正常文本。 – 2010-12-02 05:55:07

回答

2
function AddNewUpload(){ var jFilesContainer = $("mpfiles"); 

你需要一個#mpfiles ......像這樣前:

function AddNewUpload(){ var jFilesContainer = $("#mpfiles");