Prevent reload page with code added afterwards and after clicking a button

Question

first of all I'm trying to create a form where is needed to duplicate some blocks of fields and fields as the user want.

So I have a page where there is a button that after clicking on it duplicates a certain block. The first button works fine!, it duplicates a block without reloading the page when is clicked.

But in that block there are some input fields that I need to duplicate as well.

So when the block is duplicated a new button is added to duplicate fields inside that block.

The problem is that when I click on the second button it reloads the page, instead of just duplicate an input field.

To do this I'm using jquery, code to duplicate the block, this is the code to add the block, that is working fine:

$('#add-block').click(function(e) {
    var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
    html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
    html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
    $(".block-input").append(html_to_add);
    event.preventDefault();
});

code to duplicate the field (here is where the page reloads):

$('#we2_add_test').click(function(e) {
    event.preventDefault();
    $(".we2_test-input").append("<input type=\"text\" placeholder=\"Your Test\" class=\"form-control\" name=\"we3_test\" id=\"we3_test\">");
    return false;
});

I already tried this, but it didn't work

How about you use the inline js code tool and rewrite the question with some complete html + js. Its allot easier to grasp what you want if we can see the code thats causing problems. — Olian04, Jul 24 '17 at 16:24
first- id should be unique if you're using same id for buttons only the first one will work use class instead.. second- [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mohamed-Yousef, Jul 24 '17 at 16:25

Carsten Massmann · Answer 1 · 2017-07-25T03:50:25.527

The first function has event as the function argument, but later on you try to use e.preventDefault(). That doesn't match.

Maybe

$('#add-block').click(function(e) {
    var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
    html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
    html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
    $(".block-input").append(html_to_add);
    e.preventDefault();
});

will work? Difficult to say without the complete code though ...

Below is a somehow working version...

This is a little working snippet where I took care of the identity problem and the event delegation as mentioned/solved by @Alive to Die:

$(function(){
$('#add-block').click(function(e) {
    var i=$('[name=we2_test]',".block-input").length;
    var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test'+i+'">'
    +'<div class="we2_test-input col-md-12 no-pad"></div>'
    +'<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
    $(".block-input").append(html_to_add);
    e.stopPropagation();
    return false;
});

$('.block-input')
  .on('click','#we2_add_test',function(e) {
    e.preventDefault();
    var j=$('[name=we3_test]',".we2_test-input").length;
    $(this).prev().append('<input type="text" placeholder="Your Test" class="form-control" name="we3_test" id="we3_test'+j+'">');
    return false;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" id="add-block">add block</a>

<div class="block-input"></div>

Edit:
I replaced $(".we2_test-input").append(...) by $(this).prev().append(...) to ensure that only the div before the button gets added to.

I tried with event.preventDefault(); as well. The problem is in the second part ($('#we2_add_test').click) — RuiVBoas, Jul 24 '17 at 16:26

Alive to die - Anant · Accepted Answer · 2017-07-24T16:40:21.267

0

1.id="we2_test" need to be class="we2_test" and id=we2_add_test need to be class="we2_add_test",because multiple same id for different HTML element is wrong when you are going to deal them with jQuery

2.Use event delegation:-

Now both code need to be:-

$('#add-block').click(function(e) {
    e.preventDefault();
    var html_to_add = '<input type="text" placeholder="Your Test we2_test" class="form-control" name="we2_test">';
    html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
    html_to_add += '<button class="btn btn-default btn-add-test we2_add_test">+</button>';
    $(".block-input").append(html_to_add);

});
$(document).on('click','.we2_add_test',function(e) {
    e.preventDefault();
    $(".we2_test-input").append("<input type='text' placeholder='Your Test' class='form-control we3_test' name='we3_test'>");
});

edited Jul 24 '17 at 16:40

answered Jul 24 '17 at 16:33

Alive to die - Anant

70,531
10
51
98

Yeah my fault, this is just a part of my code, so by mistake I putted the same Id's in both inputs, but it works with "$(document).on('click','#we2_add_test',function(e) {", so thanks a lot for you help! – RuiVBoas Jul 24 '17 at 16:46
@RuiVBoas still i will say that use `class` not `id` as you said:- if you are `$(document).on('click','#we2_add_test',function(e) {` (because if you are adding multiple html code trough add button click) – Alive to die - Anant Jul 24 '17 at 16:49

Prevent reload page with code added afterwards and after clicking a button

2 Answers2