Search code examples
javascripthtmljquerywordpressdivi

jQuery .Click event trigger goes beyond input element that it's assigned to

I have this problem where an input .remove-button is not working as intended. When I click on the div(.tag) that contains .remove-button or around it, the .remove-button code will trigger, even though it was only set to it. Also for some reason, the code seems to be running multiple times deleting everything in the array

edit: it seems to be triggering the click when I click anywhere inside the #course-tag-container. course_splice.

script:

//...
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 for tag:

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

screenshot of what it looks like: screenshot of what it looks like

full script:

<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;
}
Solution

  • It was the label all along!

    In this line I wrap the entire container that's holding my tags with a label. This for some reason expands my iput to the entire label region.

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

    When changing the label to a paragraph and stopping it right before the div, it worked as intended.

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