javascript - 防止在单击按钮后添加代码重新加载页面

Question

首先，我尝试创建一个表单，需要根据用户的需要复制一些字段 block 和字段。

所以我有一个页面，其中有一个按钮，单击它后会复制某个 block 。第一个按钮工作正常!，它复制一个 block ，单击时无需重新加载页面。

但在该 block 中，我还需要复制一些输入字段。

因此，当 block 被复制时，一个新按钮将添加到该 block 内的重复字段中。

问题是，当我单击第二个按钮时，它会重新加载页面，而不是仅仅复制输入字段。

为此，我使用 jquery，代码来复制 block ，这是添加 block 的代码，工作正常:

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

复制字段的代码(这是页面重新加载的位置):

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

我已经尝试过这个，但没有成功

Answer 1

1.id="we2_test" 需要是 class="we2_test" 且 id=we2_add_test 需要是 class ="we2_add_test"，因为当你用 jQuery 处理不同的 HTML 元素时，多个相同的 id 是错误的

2.使用event delegation :-

现在两个代码都需要是:-

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