JQuery Verwendung eines anderen Feld hinzufügen und verstecktes Feld aktualisieren, nur einen Weg

Question

JSFiddle Link arbeiten: JSFiddle

ich ein Skript anhand von zwei Beispielen erstellt haben, die ich gefunden habe zwei verschiedene Dinge zu tun, fügen Sie eine neue Felder an den Benutzer Anfrage sowie ein verstecktes Feld zu aktualisieren, um anzuzeigen, wie viele erstellt wurden. Dies funktioniert, wenn Sie Felder hinzufügen, d. H. Das verborgene Feld ändert sich von 1 zu 2 zu 3 ..., da die zusätzlichen Felder angezeigt werden. Wenn Sie jedoch auf Entfernen klicken, wird dies nicht korrekt unter 2 und nicht immer reduziert.

Irgendwelche Vorschläge, wo ich schief gelaufen:

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

Erstens, live() wurde veraltet und entfernt von jQuery vor einigen Jahren, verwenden Sie stattdessen on() mit einer aktuellen Version von jQuery.
size() sollten ebenfalls nicht verwendet werden, sollten Sie length verwenden, und parents() ist keine gute Wahl ... je.

Zweitens sind Sie Elemente mit der gleichen ID mehrfach zu schaffen.

Sie sollten die Länge der Sammlung, oder mit anderen Worten tatsächlich überprüfen werden prüfen, wie viele Elemente es auf der Seite ist, und die zählen verwenden, wenn neue Elemente eingefügt oder entfernt werden.

Probieren Sie etwas mehr davon, verwendet es eine jQuery'ish Syntax, um das Element zu erstellen, mit dem Sie die Event-Handler direkt zum Entfernen hinzufügen können.

$(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

Sie haben/zu erhöhen Abnahme i den Wert vor der Aktualisierung weil du sonst noch den alten Wert von i in der Eingabe gespeichert hast. Und es wird nur beim nächsten Aufruf der Funktion aktualisiert. Wenn Sie die i aktualisieren, bevor die Eingabe zu aktualisieren, wird die Eingabe in exakt diesen Funktionsaufruf aktualisiert wird, nicht in den nächsten Und deshalb brauchen Sie nicht die +1 auch wenn ich

$(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; 
    }); 

Initialisierung});

Answer 4

Ich habe Ihre fiddle ein wenig aktualisiert. I:

1. entfernt, um das i> 2
2. neu definiert der Wert von i (i-- und i ++) vor der Wert von i in der Eingabe aktualisiert wurde.
3. Die "+ 1" in der ersten Definition von i entfernt.

Einige Erklärung: Wenn der Benutzer das Add-Eingabeknopf klicken, fügt das Skript auf die Schaltfläche auf die Seite, addiert 1 zu dem Wert von i, und „gespeichert“, um den Wert in der Eingabe.So sieht es so etwas wie folgt aus:

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

Wenn der Benutzer eine Eingabe löscht, wird der Eingang entfernt, i um 1 verringert wird, und der Wert wird „gespeichert“ in der Eingabe:

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