jQuery追加只發生一次

我的意圖是每創建一個新的<input>字段時只剩下一個空白字段 - 所以當最上面的字段失去焦點時。出現這種情況，但只有一次（所以只有三個<input>領域都不能進行jQuery追加只發生一次

我的工作的例子是在http://sas98.user.srcf.net/guestlist/下4號。

的代碼是：

<div id="names"> 
<p><input class="input" type="text" name="name1" /></p> 
<p><input class="input" type="text" name="name2" /></p> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
var name = $("<p><input class='input' type='text' /></p>"); 
    $('.input').blur(function() { 
     if($(this).val().length>0) { 
      $('#names').append(name.clone()); 
     } 
    }); 
}); 
</script>

編輯：

  $('#names').append(name);

改爲

 $('#names').append(name.clone());

在卡住之前使其多次工作。這看起來很有氣質 - 我看不出一個模式。

來源

2012-04-06 Sebastian

的問題是事件處理程序不會被更新。 jQuery的< 1.7使用$ .live（）綁定模糊，在新版本使用$。對（）

來源

2012-04-06 22:00:01 worenga

我在哪裏可以在這裏添加$ .on（）？ – Sebastian 2012-04-06 22:06:58

http://jsfiddle.net/YFJA6/1/ – worenga 2012-04-06 22:23:12

這是因爲您只添加一次.blur（）處理程序一次（在創建新輸入之前），因此最新的輸入也需要爲blur事件分配處理程序。

對於利益着想，請嘗試：

<div id="names"> 
<p><input class="input" type="text" name="name1" /></p> 
<p><input class="input" type="text" name="name2" /></p> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() {  
    $('.input').blur(addBlur()); 
}); 
function addBlur() { 
     var name = $("<p><input class='input' type='text' /></p>"); 
     if($(this).val().length>0) { 
      var newBox = name.clone(); 
      newBox.blur(addBlur()); 
      $('#names').append(name.clone()); 
     } 
    } 
</script>

來源

2012-04-06 21:52:49 hofnarwillie

感謝您的回覆。第二個處理程序在哪裏？ – Sebastian 2012-04-06 21:59:57

查看更新的答案 – hofnarwillie 2012-04-06 22:00:39

當我嘗試它時，腳本無法正常工作恐怕 – Sebastian 2012-04-06 22:02:58

這就像你想，我想：http://jsfiddle.net/YFJA6/

$('#names').on({ 
blur: function() { 
    if($(this).val().length>0) { 
     $('#names').append('<p><input class="input" type="text" /></p>'); 
    } 
} 
}, 'input');

來源

2012-04-06 22:08:25 mikevoermans

是的，這是另一個邏輯問題 - 可以遍歷所有輸入 - 檢查val（）並確保沒有空白 - 以避免添加過多空白輸入。我剛剛離開了他們開始的邏輯。 – mikevoermans 2012-04-06 22:19:03

這將是完美的，這是如何做到的？ – Sebastian 2012-04-06 22:21:35

它不完美，因爲您可以將輸入添加到前兩個字段並在它們之間切換，並且不斷添加新字段。請參閱http://jsfiddle.net/YFJA6/1/進行修復 – worenga 2012-04-06 22:24:16

這個工作對我來說：

$('#selector').append(htmlcontent.clone(true));

來源

2016-02-08 21:40:36 mostafaznv

jQuery追加只發生一次

回答

相關問題