使用jquery追加整個div及其所有元素

使用jQuery我想在發生點擊事件時追加整個div。我試過了，但它不起作用。使用jquery追加整個div及其所有元素

當用戶點擊Add another image我想附加整個div標籤及其所有元素。

這裏是我的代碼：

<form method="post" id="form_property" enctype="multipart/form-data"> 
    <div class="row"> 
     <div class="span4" id="image"> 
      <h3><strong>4.</strong> <span>Add Images to your Property</span></h3> 

      <div class="fileupload fileupload-new control-group" data-provides="fileupload"> 
       <label class="control-label" for="inputPropertyPrice">Image files</label> 
       <div class="input-append"> 
        <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i> 
<span class="fileupload-preview"></span> 

        </div> <span class="btn btn-file"> 
             <span class="fileupload-new">Select file</span> 
<span class="fileupload-exists">Change</span> 

        <input type="file" name="files1" accept="image/*" /> 
        </span> 
       </div> 
      </div> 
     </div> 
     <!-- /.span4 --> 
    </div> 
    <!-- /.row --> 
    <br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a> 
    <br/> 
    <br/> 
    <input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px"> 
</form>

jQuery的

<script type="text/javascript"> 

    $(document).ready(function(){ 
     var count = 2; 
     $('#another_image').click (function(){ 

      if(count < 7){ 
       $('<br/><br/> 
          <div class="input-append"> 
           <div class="uneditable-input"> 
            <i class="icon-file fileupload-exists"></i> 
            <span class="fileupload-preview"></span> 
           </div> 
                <span class="btn btn-file"> 
                 <span class="fileupload-new">Select file</span> 
                 <span class="fileupload-exists">Change</span> 
                 <input type="file" name="files'+ count +'" accept="image/*" /> 
                </span> 



          </div> 
         ').appendTo ("#image"); 


      count++; 
      } 
     }); 
     }); 
    </script>

有人可以幫我解決這一問題？

來源

2015-04-20 Sathya Baman

你在你的開發人員工具檢查，HTML標籤？它是否被追加？ – Pawan

$（'＃image'）。append（yourHtml）; 我認爲這應該足夠了 – suman

你的代碼實際上工作正常。看到它在這裏工作：http://jsfiddle.net/Sourabh_/fn7o2LhL/ – Zee

使用.appendTo()以及clone()。

如果您不使用clone()，那麼同一個div將被替換，並且目標中沒有任何更新。你不需要輸入/複製整個html。

語法：$(Element_Selector).appendTo(TargetSelector)。

$($('.input-append').first().clone()).appendTo("#image");

Fiddle

_{*注：克隆現有的HTML可能會產生重複的ID。搞定此事。}

來源

2015-04-20 05:20:59

tnx @shaunak，但它必須動態改變input type ='file'中的'name ='files2'字段。這是可能的。 –

是的。檢查這個http://jsfiddle.net/ycwokv9m/1/ –

@SathyaBaman ..我會說你需要接受這個答案！ :) –

我喜歡@ Shaunak的回答是更有效的，但如果你想在你的一路跟隨，然後檢查THIS DEMO和下面的代碼

$(document).ready(function(){ 
     var count = 2; 
     $('#another_image').click (function(){ 

      if(count < 7){ 
       $('<br/><br/>' + 
        '<div class="input-append">' + 
        '<div class="uneditable-input">'+ 
        '<i class="icon-file fileupload-exists"></i>' + 
        '<span class="fileupload-preview"></span>' + 
        '</div><span class="btn btn-file">'+ 
        '<span class="fileupload-new">Select file</span>'+ 
        '<span class="fileupload-exists">Change</span>' + 
        '<input type="file" name="files'+ count +'" accept="image/*" />'+ 
        '</span></div>').appendTo ("#image"); 
      count++; 
      } 
     }); 
});

來源

2015-04-20 05:27:12

如果你看到DOM，名稱會改變.. :) –

對不起，刪除評論.. –

沒關係。沒關係.. ：） –

使用jquery追加整個div及其所有元素

回答

相關問題