2010-12-02 191 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");