Question

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

所以我有一个页面，其中有一个按钮，点击它后复制某个块。第一个按钮工作正常！它会复制一个块，而不会在单击时重新加载页面。

但是在那个区块中我还需要复制一些输入字段。

因此，当复制块时，会添加一个新按钮以复制该块内的字段。

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

要做到这一点，我正在使用jquery，代码来复制块，这是添加块的代码，工作正常：

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

第一个函数有event作为函数参数，但稍后您尝试使用e.preventDefault()。那不匹配。

也许

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

会奏效吗？没有完整的代码虽然很难说...

下面是一个某种方式工作版......

这是一个小工作片段，我负责处理身份问题和事件委托，如@Alive提到/解决死亡：

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

修改
我将$(".we2_test-input").append(...)替换为$(this).prev().append(...)，以确保只有按钮添加到之前的div。

Answer 2

1。id="we2_test"需要class="we2_test"而id=we2_add_test需要class="we2_add_test"，因为当您要处理它们时，不同HTML元素的多个相同ID是错误的用jQuery

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

使用之后添加的代码和单击按钮后防止重新加载页面

2 个答案: