[英]How to add input fields on button click
function add() { var new_chq_no = parseInt($('#total_chq').val()) + 1; var new_input = "<input type='text' id='new_" + new_chq_no + "'>"; $('#new_chq').html(new_input); } function remove() { var last_chq_no = $('#total_chq').val(); if (last_chq_no > 1) { $('#new_' + last_chq_no).append(''); $('#total_chq').val(last_chq_no - 1); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <button onclick="add()">Add</button> <button onclick="remove()">remove</button> <div id="new_chq"></div> <input type="hidden" value="1" id="total_chq">
它一次添加輸入字段,第二次單擊它不添加任何內容並且刪除按鈕不起作用
附加元素時,您必須使用.append()
而不是.html()
:
$('#new_chq').append(new_input);
最好在您的 JS 代碼中附加事件,例如:
$('.add').on('click', add);
$('.remove').on('click', remove);
注意 1:不要忘記增加計數器#total_chq
:
$('#total_chq').val(new_chq_no);
注意 2:如果要刪除元素,則必須使用.remove()
。
$('.add').on('click', add); $('.remove').on('click', remove); function add() { var new_chq_no = parseInt($('#total_chq').val()) + 1; var new_input = "<input type='text' id='new_" + new_chq_no + "'>"; $('#new_chq').append(new_input); $('#total_chq').val(new_chq_no); } function remove() { var last_chq_no = $('#total_chq').val(); if (last_chq_no > 1) { $('#new_' + last_chq_no).remove(); $('#total_chq').val(last_chq_no - 1); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <button class="add">Add</button> <button class="remove">remove</button> <div id="new_chq"></div> <input type="hidden" value="1" id="total_chq">
檢查代碼段,希望這是您要查找的內容:D
function add(){ var new_chq_no = parseInt($('#total_chq').val())+1; var new_input="<input type='text' id='new_"+new_chq_no+"'>"; $('#new_chq').append(new_input); $('#total_chq').val(new_chq_no) } function remove(){ var last_chq_no = $('#total_chq').val(); if(last_chq_no>1){ $('#new_'+last_chq_no).remove(); $('#total_chq').val(last_chq_no-1); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <button onclick="add()">Add</button> <button onclick="remove()">remove</button> <div id="new_chq"></div> <input type="hidden" value="1" id="total_chq">
$('.add').on('click', add); $('.remove').on('click', remove); function add() { var new_chq_no = parseInt($('#total_chq').val()) + 1; var new_input = "<input type='text' id='new_" + new_chq_no + "'>"; $('#new_chq').append(new_input); $('#total_chq').val(new_chq_no); } function remove() { var last_chq_no = $('#total_chq').val(); if (last_chq_no > 1) { $('#new_' + last_chq_no).remove(); $('#total_chq').val(last_chq_no - 1); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <button class="add">Add</button> <button class="remove">remove</button> <div id="new_chq"></div> <input type="hidden" value="1" id="total_chq">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.