使用jQuery添加一個字段，並更新隱藏字段，只有工作的一種方式

Question

的jsfiddle鏈接：JSFiddle

我創建了使用兩個例子，我發現做兩件不同的事情的腳本，一個在用戶添加新領域請求以及更新隱藏字段以顯示已創建了多少個字段。如果添加字段，即隱藏字段從1到2更改爲3 ...，當額外的字段出現時，這是行得通的，但是當您單擊刪除時，它不會在2以下正確縮小，並且根本不會。

以任何建議，我出了問題：

HTML：

<input id="bacon" type="hidden" class="bacon" value="1" name="testinput"> 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 

<div id="p_scents"> 
    <p> 
     <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
    </p> 
</div> 

JQuery的：

$(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 1; 

     $('#addScnt').live('click', function() { 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
       $('input#bacon').val(i); 
       i++; 
       return false; 

     }); 

     $('#remScnt').live('click', function() { 
       if(i > 2) { 
         $(this).parents('p').remove(); 
         $('input#bacon').val(i); 
         i--; 
       } 
       return false; 
     }); 
}); 

Answer 1

首先，live()已被棄用，幾年前從jQuery的去除，使用on()使用jQuery的最新版本代替。
size()不應該使用，你應該使用length，和parents()不是一個好的選擇......有史以來。

其次，你多次創建具有相同ID的元素。

您應該檢查集合的長度，或換句話說，實際檢查頁面上有多少元素，並在插入或刪除新元素時使用該元素。

嘗試更類似這樣的東西，它使用更多的jQuery'ish語法來創建元素，它允許您添加直接刪除的事件處理程序。

$(function() { 
 
    var scntDiv = $('#p_scents'); 
 

 
    $('#addScnt').on('click', function(e) { 
 
     e.preventDefault(); 
 

 
     var i = $('.scents').length + 1, 
 
      p = $('<p />', { 
 
       'class': 'scents' 
 
      }), 
 
      l = $('<label />', { 
 
       'for': 'p_scnts' + i 
 
      }), 
 
      f = $('<input />', { 
 
       type : 'text', 
 
       id : 'p_scnt' + i, 
 
       name : 'p_scnt' + i, 
 
       size : '20', 
 
       placeholder: "Input Value" 
 
      }), 
 
      a = $('<a />', { 
 
       href: "#", 
 
       text: 'Remove', 
 
       on: { 
 
        click: function() { 
 
         p.remove(); 
 
         $('#bacon').val($('.scents').length + 1); 
 
        } 
 
       } 
 
      }); 
 

 
     scntDiv.append(p.append(l.append(f), a)); 
 
     $('#bacon').val(i + 1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="bacon" class="bacon" value="1" name="testinput"> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
    <label for="p_scnts"> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
    </label> 
 
    </p> 
 
</div>

Answer 2

$('#remScnt').live('click', function() { 
     if(i > 2) { 
     --i; 
       $(this).parents('p').remove(); 
       $('input#bacon').val(i); 

     } 
     return false; 
}); 

Answer 3

你必須增加在更新前值/減少我因爲否則你仍然有我存儲在輸入中的舊值。它只會在下一次函數調用時更新。當你更新輸入之前更新我，輸入獲取，準確的函數調用更新，不會在未來 ，因此，你也初始化我

$(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents p').size(); 

    $('#addScnt').on('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      $('input#bacon').val(i); 
      return false; 

    }); 

    $('#remScnt').on('click', function() { 
      if(i > 1) { 
        $(this).parents('p').remove(); 
        i--; 
        $('input#bacon').val(i); 
      } 
      return false; 
    }); 

時不需要+1}）;

Answer 4

我已經更新您的fiddle一點點。 I：

1. 刪除了I> 2
2. Redifined i的值（我 - 和我++）之前i的值在輸入已更新。
3. 刪除i的第一個定義中的「+ 1」。

一些解釋： 如果用戶單擊添加輸入按鈕，你的腳本添加按鈕的頁面，增加了1至i的值，而「存儲」在輸入值。因此，它看起來是這樣的：

$("form").append(/*new input*/); 
i++; 
$("input").val(i); 

如果用戶刪除輸入，輸入被刪除，我減1，和值爲「存儲」在輸入：

$("input").remove(); 
i--; 
$("input").val(i);