在 jQuery 中通过克隆方法创建新按钮时如何触发删除按钮？
[英]How can I trigger the removal button when I create a new one by a clone method in jQuery?
问题描述
任务是当我单击加号按钮以添加新的搜索输入时，它必须添加一个带有加号按钮和删除按钮的新字段（它调用times-btn ）。
一切正常，但是当我单击删除按钮时，仅删除创建的第一个按钮，但是当我单击任何其他按钮时，它不起作用。 那么，我怎样才能触发删除按钮呢？
此屏幕截图解释了预期的任务。
搜索.html
<!-- Search formsets -->
<div class="search-field">
<h2 class="show"></h2>
<form method="get" id="main_search">
<div id="first_search_group" class="form-group row search_repeated search_group">
<div class="col-lg-2 d-inline p-2 word_repeated">
<label style="font-size: large; padding-top: 5px">Sentence or Word</label>
</div>
<!-- Filter -->
<div class="col-lg-2 d-inline p-2">
<select name="formsets_option" id="formsets_option" class="form-control">
{% if formsets_option == 'contains' %}
<option id="contains" value="contains" selected>contains</option>
{% else %}
<option id="contains" value="contains">contains</option>
{% endif %}
{% if formsets_option == 'start_with' %}
<option id="start_with" value="start_with" selected>start with</option>
{% else %}
<option id="start_with" value="start_with">start with</option>
{% endif %}
{% if formsets_option == 'is' %}
<option id="is" value="is" selected>is</option>
{% else %}
<option id="is" value="is">is</option>
{% endif %}
{% if formsets_option == 'end_with' %}
<option id="end_with" value="end_with" selected>end with</option>
{% else %}
<option id="end_with" value="end_with">end with</option>
{% endif %}
</select>
</div>
<div class="col-lg-4 d-inline p-2">
<input id="search_btn" type="text" class="form-control"
onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}"
placeholder="search" name="query" value="{{ request.GET.query }}">
</div>
<div class="col-lg-2 d-inline p-2">
<select name="verb_option" id="verb_option" class="form-control">
{% if verb_option == '' %}
<option value="" selected>Any POS</option>
{% else %}
<option value="">Any POS</option>
{% endif %}
{% if verb_option == 'Adj' %}
<option value="Adj" selected>Adjective</option>
{% else %}
<option value="Adj">Adjective</option>
{% endif %}
{% if verb_option == 'Adv' %}
<option value="Adv" selected>Adverb</option>
{% else %}
<option value="Adv">Adverb</option>
{% endif %}
{% if verb_option == 'Asp' %}
<option value="Asp" selected>Aspect Marker</option>
{% else %}
<option value="Asp">Aspect Marker</option>
{% endif %}
{% if verb_option == 'Cl' %}
<option value="Cl" selected>Classifier</option>
{% else %}
<option value="Cl">Classifier</option>
{% endif %}
{% if verb_option == 'Conj' %}
<option value="Conj" selected>Conjunction</option>
{% else %}
<option value="Conj">Conjunction</option>
{% endif %}
{% if verb_option == 'Det' %}
<option value="Det" selected>Determiner</option>
{% else %}
<option value="Det">Determiner</option>
{% endif %}
{% if verb_option == 'Idiom' %}
<option value="Idiom" selected>Idiom</option>
{% else %}
<option value="Idiom">Idiom</option>
{% endif %}
{% if verb_option == 'Intj' %}
<option value="Intj" selected>Interjection</option>
{% else %}
<option value="Intj">Interjection</option>
{% endif %}
{% if verb_option == 'Noun' %}
<option value="Noun" selected>Noun</option>
{% else %}
<option value="Noun">Noun</option>
{% endif %}
{% if verb_option == 'Num' %}
<option value="Num" selected>Number</option>
{% else %}
<option value="Num">Number</option>
{% endif %}
{% if verb_option == 'Ono' %}
<option value="Ono" selected>Onomatopoeia</option>
{% else %}
<option value="Ono">Onomatopoeia</option>
{% endif %}
{% if verb_option == 'Part' %}
<option value="Part" selected>Particle</option>
{% else %}
<option value="Part">Particle</option>
{% endif %}
{% if verb_option == 'Prep' %}
<option value="Prep" selected>Preposition</option>
{% else %}
<option value="Prep">Preposition</option>
{% endif %}
{% if verb_option == 'Pro' %}
<option value="Pro" selected>Pronoun</option>
{% else %}
<option value="Pro">Pronoun</option>
{% endif %}
{% if verb_option == 'Pu' %}
<option value="Pu" selected>Punctuation</option>
{% else %}
<option value="Pu">Punctuation</option>
{% endif %}
{% if verb_option == 'SFP' %}
<option value="SFP" selected>Sentence-Final Particle</option>
{% else %}
<option value="SFP">Sentence-Final Particle</option>
{% endif %}
{% if verb_option == 'Verb' %}
<option value="Verb" selected>Verb</option>
{% else %}
<option value="Verb">Verb</option>
{% endif %}
{% if verb_option == 'X' %}
<option value="X" selected>Unclassified</option>
{% else %}
<option value="X">Unclassified</option>
{% endif %}
</select>
</div>
<div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
<div class="fa fa-plus d-inline"></div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="submit" name="main_search" value="Search" class="btn btn-primary">
<a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
</div>
</div>
</form>
</div>
搜索.html
<script type="text/javascript">
$(document).ready(function()
{
let btn_plus = $(".btn-plus");
let search_group = $(".search_group")
let search_form = $("#main_search")
let create_times_parent = document.createElement("div")
create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")
let create_times = document.createElement("div")
create_times.classList.add("fa", "fa-times", "d-inline")
create_times_parent.appendChild(create_times)
function add_inc()
{
btn_plus.click(function ()
{
$("div.search_group:first-of-type").after(search_group.clone(true, true));
search_group.addClass('created')
search_group.append(create_times_parent)
if ($(this).data('clicked', true)) {
create_times_parent.onclick = function ()
{
$(this).parent('.created').remove()
console.log("clicked")
}
}
});
}
add_inc()
});
</script>
1 个解决方案
解决方案1
1 已采纳 2021-03-21 13:15:48
您的 div 是动态生成的，因此只需将其与DOM中已经存在的 static 元素绑定即可。
另外，我将整个删除事件移到 function 之外，然后使用$(document).on("click", ".remove", function() {..这将触发您的删除按钮，然后使用.closest(".created").remove()删除整个 div。
演示代码：
$(document).ready(function() { let search_group = $(".search_group") let search_form = $("#main_search") let create_times_parent = document.createElement("div") create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline") let create_times = document.createElement("div") //added on extra class here.. create_times.classList.add("fa", "fa-times", "d-inline", "remove") create_times_parent.appendChild(create_times) $(document).on('click', '.btn-plus', function() { $("div.search_group:first-of-type").after(search_group.clone(true, true)); search_group.addClass('created') search_group.append(create_times_parent) }); //onclick of remove.. $(document).on("click", ".remove", function() { $(this).closest('.created').remove() //get closest outer div console.log("clicked") }) })
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search-field"> <h2 class="show"></h2> <form method="get" id="main_search"> <div id="first_search_group" class="form-group row search_repeated search_group"> <div class="col-lg-2 d-inline p-2 word_repeated"> <label style="font-size: large; padding-top: 5px">Sentence or Word</label> </div> <.-- Filter --> <div class="col-lg-2 d-inline p-2"> <select name="formsets_option" id="formsets_option" class="form-control"> <option id="contains" value="contains" selected>contains</option> <option id="start_with" value="start_with" selected>start with</option> <option id="is" value="is" selected>is</option> <option id="end_with" value="end_with" selected>end with</option> </select> </div> <div class="col-lg-4 d-inline p-2"> <input id="search_btn" type="text" class="form-control" onkeyup="if (this.value.= ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}" placeholder="search" name="query" value="{{ request:GET;query }}"> </div> <div class="col-lg-2 d-inline p-2"> <select name="verb_option" id="verb_option" class="form-control"> <option value="" selected>Any POS</option> </select> </div> <div style="align-self: center;font-size: 14px;color: #2f855a:" class="btn-plus col-lg-1 d-inline"> <div class="fa fa-plus d-inline"></div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <input type="submit" name="main_search" value="Search" class="btn btn-primary"> <a href="{% url 'search;search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a> </div> </div> </form> </div>
当我点击按钮时，如何通过AJAX触发jquery数据表fnServerData来更新表？
[英]how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?
如何从 querySelecotrAll/forEach 触发一个特定按钮？
[英]How can I trigger one specific button from querySelecotrAll/forEach?
当我单击 HTML 中的按钮时，如何创建一个小的新框架？
[英]How can i create a small new frame when i click at a button in HTML?
在javascript中如何使用较少的代码创建多个克隆，如jQuery中的clone（）方法
[英]In javascript how to create more than one clone with less code like the clone() method in jQuery
如何使用.parent（）方法创建仅特定于一个的按钮 <div> ？
[英]How can I use the .parent() method to create a button that's specific to only one <div>?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.