javascript - jQuery .Click 事件触发器超出了它分配给的输入元素
问题描述
我有这个问题，输入.remove-button没有按预期工作。当我单击.tag包含.remove-button或围绕它的 div() 时，.remove-button代码将触发，即使它只是设置为它。同样出于某种原因，代码似乎多次运行，删除了数组中的所有内容
编辑：当我单击#course-tag-container.
course_splice.
脚本：
//...
jQuery("input.remove-button").click((event)=>{
//find course text
course_inv.splice( course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
event.target.closest(".tag").remove();
});
//...
标签的html：
<div class="tag">
<div class="course-wrap">
<p class="course">LEED v4 Project Management</p>
<div class="input-wrapper">
<input type="image" name="removeButton"
src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg"
alt="remove button" class="remove-button">
</div>
</div>
</div>
它的外观截图：
完整脚本：
<script>
let course_inv = [];
jQuery( document ).ready(function() {
//course field
let course_field = document.getElementById("course-field");
course_field.placeholder = "LEED v4 Project Management,LEED for Homes Workshop: Part2,...";
jQuery(".wpcf7").wrap('<div id="form-container"/>');
//add tag container
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
jQuery("#form-container").append('<button id="fake-submit" type="button">Send</button>');
jQuery("#fake-submit").click((event)=>{
jQuery("#course-field").val("");
jQuery("#course-field").val(course_inv.join(", "));
jQuery("#submit-button").click();
})
});
jQuery(document).on('ready ajaxComplete', function () {
//add button functionality
jQuery(".et_pb_post").wrap('<div class="course-wrapper" />');
jQuery(".et_pb_post").after('<input type="image" name="addButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_add.svg" width="100px" height="auto" alt="add button" class="add-button">');
jQuery(".add-button").wrap('<div/>');
//adding button functionality
jQuery(".add-button").click((event)=>{
let course_name = jQuery(event.target).closest(".course-wrapper").find(".entry-title").text();
if(course_inv.indexOf(course_name) === -1){
course_inv.push(course_name);
jQuery("#course-tag-container").append('<div class="tag"><div class="course-wrap"><p class="course">'+course_name+'</p><div class="input-wrapper"><input type="image" name="removeButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg" alt="remove button" class="remove-button"> </div></div></div>');
jQuery("input.remove-button").click((event)=>{
console.log("start------------\n"+"courses:" +course_inv.join(","));
//find course text
console.log( "index: "+course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()) );
course_inv.splice(
course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
console.log("courses:" +course_inv.join(",")+"\n end----------------");
event.target.closest(".tag").remove();
});
}else{
jQuery(".tag:contains('"+course_name+"')").addClass('animate')
jQuery(".tag:contains('"+course_name+"')").on("animationend", ()=>{
jQuery(".tag:contains('"+course_name+"')").removeClass('animate');
});
}
})
});
</script>
CSS：
input,select{
border-radius: 20px !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-bottom: 10px !important;
font-size: 18px !important;
}
ul input:nth-of-type(2){
border:none;
}
.searchandfilter p
{
margin-top: 1em;
display: block !important;
}
.searchandfilter ul
{
display: block !important;
}
.searchandfilter h4
{
margin:20px 0;
font-size:20px !important;
}
.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
display:block !important;
}
/*style the wp-pagenavi pagination links*/
.wp-pagenavi a,
.wp-pagenavi span {
color: #000000;
background: #f1f3f5;
font-size: 1em !important;
line-height: 1em;
font-weight: bold !important;
padding: 0.45em 0.8em !important;
border-radius: 100px;
transition: all .5s;
}
/*style the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
font-size: 17px !important;
border-radius: 100px;
}
/*style the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
/*style the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
/*remove border and center the wp-pagenavi links*/
.wp-pagenavi {
border-top: none;
text-align: center;
}
/*contact form css*/
.wpcf7 {
background-color: #DBDBDB;
border-radius: 5px;
}
.wpcf7-form{
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
margin-bottom: 5px;
padding: 0px;
}
#course-field{
background-color: #deddbd;
}
.wpcf7-textarea {
width: 100% !important;
}
.wpcf7 input {
margin-top: 5px;
width: 100%;
height: 43px;
font-size: 17px !important;
padding-left: 10px;
border-radius: 1px !important;
margin-bottom: 5px !important;
}
.wpcf7 label{
color: black !important;
font-size: 19px;
}
.textarea{
height: 150px !important;
margin-bottom: -10px;
font-family: verdana !important;
}
#submit-button{
background: #0078d3;
border: 0px solid !important;
border-radius: 5px !important;
font-size: 18px;
color: white;
transition: background-color 250ms;
cursor: pointer;
margin-bottom: -10px !important;
}
#submit-button:hover {
background-color: #3382BE;
}
.title{
display: inline-block;
}
.color{
background-color: #ededed !important;
}
.course-wrapper{
display: flex;
}
.add-button{
transition: transform 250ms;
margin-top: 50%;
}
.add-button:hover{
transform: rotate(-90deg);
background: url(black.png);
filter: invert(15%) sepia(100%) saturate(7499%) hue-rotate(196deg) brightness(94%) contrast(102%);
}
#blog-container{
left: 10px;
}
#fake-submit{
width: 100%;
border: none;
height: 44px;
border-radius: 5px;
background-color: #005DA4;
color: white;
font-size: 15px;
margin-top: 36px;
transition: background-color 250ms;
cursor: pointer;
margin-top: -14px;
}
#fake-submit:hover{
background-color: #3382BE;
}
/*css for the tags*/
.tag {
background-color: rgb(220 220 220);
display: inline-block;
margin-bottom: 5px;
border-radius: 25px;
}
.course{
border-radius: 15px;
margin:0px;
margin-top: 15px;
margin-bottom: 15px;
font-size:15px;
margin-left:15px !important;
}
.input-wrapper{
margin-left: -10px;
margin-right: -15px
}
.remove-button{
width:60px !important;
height:auto;
margin-top:10% !important;
margin-bottom:0px !important;
}
.course-wrap{
display:flex;
align-items: center;
margin-bottom:-10px;
margin-top:-10px;
}
#course-tag-container{
margin-top: 10px;
margin-bottom: -10px !important;
background-color: white;
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 1px;
border: #BBBBBB 1px solid;
min-height: 43px;
}
#form-container{
background-color: #DBDBDB;
padding: 10px;
padding-top: 12px;
border-radius: 5px;
}
#course-field, #submit-button{
display: none;
}
.tag-label {
color: black;
font-size: 19px;
}
@keyframes highlight-tag {
50%{
background-color: #75ACD8;
}
100%{
background-color: #DBDBDB;
}
}
.animate{
animation: highlight-tag 1s ease-in-out;
}
解决方案
一直都是这个标签！
在这一行中，我用标签包裹了包含我的标签的整个容器。由于某种原因，这将我的输入扩展到整个标签区域。
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
将标签更改为段落并在 div 之前将其停止时，它按预期工作。
jQuery(".wpcf7").before('<p class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span></p><div id="course-tag-container"/>');
推荐阅读
- angular-ui-grid - ui-grid rowTemplate：如何根据列数据动态改变行颜色
- python - 有没有办法从视频中剪切帧以减少其大小和持续时间？
- java - 如何正确格式化取自 Youtube API 的 Java (android) 中的 Youtube 视频时长
- java - spring Aspect 注释无法解析为类型
- python-3.x - 需要帮助打印带有分隔符的字符串（python）
- c++11 - 那么如何修复这个简单的 RAII 关闭调用者的警告呢？
- sql-server - 如何在传递参数值时使用字符串函数
- reactjs - 如何将 React Hooks 与多个 API 调用一起使用？
- html - 如何在具有特定类的 DIV 中排除标题的 CSS 样式？
- javascript - 如何选择匹配度最高的后代