動態添加輸入字段消失立刻

我想寫一個jQuery代碼片段，在其中我可以添加輸入字段動態點擊'添加圖像'按鈕（代碼如下）使用jQuery appendTo（）函數。但是，每當我點擊按鈕時，文本框就會出現，然後立即消失。我注意到其他人也遇到了這個問題，但我無法爲這個問題找到合適的解決方案。有人能幫我解決這個問題嗎？動態添加輸入字段消失立刻

... 
<div class="row"> 
    <div class="span4" id="images-div"> 
     <input type="text" name="txt-image[]" class="span4 txt-input-field"> 
    </div> 
    <div class="span1"> 
     <button class="btn" id="btn-add-image">Add Image</button> 
    </div> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#btn-add-image').click(function() { 
      $('<input type="text" name="txt-image[]" class="span4 txt-input-field">').appendTo('#images-div'); 
     }); 
    }); 
</script> 
...

來源

2012-03-11 DEREK N

工作得很好對我來說：http://jsfiddle.net/DNXB4/必須有一些干擾的代碼的其他部分。 – JJJ 2012-03-11 16:15:00

爲什麼*添加圖片* **添加文本框**？！ =） – gdoron 2012-03-11 16:17:06

@Juhana這是否意味着這個問題可能與DOM結構有關？ – 2012-03-11 16:55:58

Answer provided by DEREK N：

問題通過使用的preventDefault（）函數來解決，如下面

<script> 
    $(document).ready(function(){ 
     $('#btn-add-image').click(function(event) { 
      event.preventDefault(); 
      $('<input type="text" name="txt-image[]" class="span4 txt-input-field">').appendTo('#images-div'); 
     }); 
    }); 
</script>

來源

2012-03-12 13:12:47 casperOne

動態添加輸入字段消失立刻

回答

相關問題