防止重載頁面後添加代碼，然後點擊按鈕

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

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

Answer 2

第一個函數具有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被添加到。