preventDefault не работает, когда несколько кнопок с тем же классом

Question

У меня есть кнопка, которая добавляет некоторые элементы формы в div. Дело в том, что кнопка дублируется и добавляется. При первом нажатии кнопки «добавить» добавляется еще одна строка элементов формы. Когда я нажимаю кнопку «Добавить», которая была добавлена ​​с первого щелчка (для добавления другой строки), страница обновляется (preventDefault не работает). Кнопка удаления работает, но я застрял только в том, чтобы добавить одну строку. Я хотел бы иметь кнопку «добавить» в каждой строке, но не знаю, как это сделать.

Вот код:

<form class="form-inline" role="form"> 
    <div class="butter"> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail2">Email</label> 
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email"> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputPassword2">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
     </div> 
     <button class="btn btn-info nutter">add</button> 
    </div> 
</form> 

<script id="add_form"> 
    <div class="spacer"> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail2">Email</label> 
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email"> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputPassword2">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
     </div> 
     <button class="btn btn-info nutter">add</button> 
     <button class="btn btn-danger gutter">remove</button> 
    </div> 
</script> 

$(document).ready(function() { 
    var wrapper   = $('.butter'); //Fields wrapper 
    var add_button  = $('.nutter'); //Add button ID 

    $(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     var text = $('#add_form').html(); 
     $(wrapper).append(text); //add input box 
    }); 

    $(wrapper).on("click",".gutter", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Вот jsfiddle: http://jsfiddle.net/7o1rgsw3/1

Answer 1

Так как вы добавляете HTML динамически с каждым щелчком мыши вы должны использовать метод on вместо click

$(document).ready(function() { 
    $(document).on('click', '.nutter',function(e) { 
     e.preventDefault(); 
     var text = $('#add_form').html(); 
     $('.butter').append(text); 
    }); 

    $(document).on("click",".gutter", function(e){ //user click on remove text 
     e.preventDefault(); 
     $(e.target).closest('.spacer').remove(); 
    }); 
}); 

и here is the fiddle