jquery脚本来生成表单元素？

Question

我有一个简单的jQuery脚本，让我上传的文件

$(function(){ 

    //------------- Plupload php upload -------------// 
    // Setup html4 version 
    $("#html4_uploader").pluploadQueue({ 
     // General settings 
     runtimes : 'html4', 
     url : '../../assets/dashboard/php/upload.php', 
     max_file_size : '10mb', 
     max_file_count: 15, // user can add no more then 15 files at a time 
     chunk_size : '5mb', 
     multiple_queues : true, 

     // Rename files by clicking on their titles 
     rename: true, 

     // Sort files 
     sortable: true, 
    }); 

    var uploader = $('#html4_uploader').pluploadQueue(); 
    uploader.bind('FileUploaded', function(up, file, info) { 
      if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) { 
       $('.gradient').hide(); 

       form = '<form class="form-horizontal" id="form-validate" novalidate="novalidate" method="post">'; 
       length = uploader.files.length; 
       files = uploader.files; 

       for (var i = 0; i <= length-1; i++) { 
        form+= '<div class="alert alert-success" id="message" style="display:none;"></div>'; 
        form+= '<div class="form-row row-fluid">'; 
        form+= '<div class="span12">'; 
        form+= '<div class="row-fluid">'; 
        form+= '<label class="form-label span3" for="medianame">File Title</label>'; 
        form+= '<input class="span3 text" id="medianame'+i+'" name="mediatitle[]" type="text">'; 
        form+= '<input type="hidden" name="mediapath[]" value="'+files[i].name+'" >'; 
        form+= '<strong style="margin-right:20px;" >'+files[i].name+'</strong>'; 
        form+= '</div>'; 
        form+= '</div>'; 
       }; 

       form+= '<div class="form-row row-fluid">'; 
       form+= '<div class="span12">'; 
       form+= '<div class="row-fluid">'; 
       form+= '<div class="form-actions">'; 
       form+= '<div class="span3"></div>'; 
       form+= '<div class="span9 controls">'; 
       form+= '<button type="submit" id="submit" class="btn marginR10" style="margin:10px;" >Save</button>'; 
       form+= '<button class="btn btn-danger">Delete</button>'; 
       form+= '</div>';     
       form+= '</div>'; 
       form+= '</div>'; 
       form+= '</div>'; 
       form+= '</div>'; 
       form+= '</form>'; 
       $('#multiform').html(form); 

       $('#submit').click(function() 
       { 
         $.ajax 
         ({ 
          type: "POST", 
          url: "", 
          dataType: "json", 
          data: $('form').serialize(), 
          cache: false, 
          beforeSend: function() 
          { 
           $('#message').hide(); 
          }, 
          success: function(data) 
          { 
           if(data.response) 
           { 
            $('#message').show().html(data.message); 
           } 
          } 
         }); 
         return false; 
       }); 
      } 
     }); 

}); 

的脚本只是做工精细旁边创建文本框，但有一个问题
当创建文本框的第一个文本框的工作不错，但其他所有箱子都禁止我不能对他们点击书写文字
我试图修改了很多的时间，但我想不出为什么这个问题会发生

Answer 1

这是因为你生成复制id秒。

您正在创建一个div，其中id的“消息”随循环的每次迭代而变化。具有相同的多个元素id是无效的HTML，因为id s 必须在文档中是唯一的。

当您选择id与jQuery选择或.getElementById()它仅选择第一之一，因为有不应该是任何其它元件用相同的id。

现在您的label及其for属性也有问题。所有的标签都指向一个带有“medianame”的id的元素。应更改为

<label class="form-label span3" for="medianame'+i+'">FileTitle</label> 

以匹配下一行生成的输入。