plus minus button with specific parent input doesn't work

Question

as you can see here jsfiddle.net/TTU4Z/1/ The jquery code in question is below and if i run it without all my code (like in jsfiddle) it run perfectly. but with all my code doesn't run.

$(document).ready(function() {

// This button will increment the value
$('.plus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[id='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        $('input[id='+fieldName+']').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[id='+fieldName+']').val(0);
    }
});
// This button will decrement the value till 1
$(".minus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[id='+fieldName+']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[id='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[id='+fieldName+']').val(0);
    }
});

});

Clicking on "add" button all is good, but when you click in one of minus or plus button it delete all.

It should increase or decrease the val of the relative input as you can see, but nothing change if i try to edit everything in those functions. What to do?

Answer 1

Since you are appending elements dynamically you have to use event delegation in this situation. Actually the registered events are not invoking in your context, that's why the buttons are exhibiting their original behavior.

Try,

$(document).on('click','.plus',function(e){

and

$(document).on('click','.minus',function(e){

Additionally, the selector that you are framing dynamically contains some meta-characters, just pass that as a string or you have to escape it, in order to make your code work properly.

DEMO

---

New Demo after fixing your concatenation issues. And in that demo, i just removed the attribute selectors like [id='blah'] and replaced that with $('#blah').

DEMO - I

Answer 2

See updated fiddle http://jsfiddle.net/LfNmh/

You had your x variable inside the code string where it should have been in the code. line 15 ..

var numPortata = '<td><button class="minus" field="portata'+x+'">-</button><input id="portata'+x+'" type="number" name="numPortata[]" value="1" size="10" min="1" max="10" step="1" required><button class="plus" field="portata'+x+'">+</button></td>';

I also changed the code so that the events are attached at the document level as Rajaprabhu said.