单击时，Jquery 会多次显示警报消息

alert message displays multiple time by Jquery on click

本文关键字：显示 消息 Jquery 单击      更新时间：2023-09-26

我的警报信息显示三次甚至 4 次无法识别问题，但我知道我需要取消绑定，但无处可放。任何帮助将不胜感激。谢谢

jQuery('#compleave,#prevleave,#sickleave,#vacation').on('click', function(event) {     
    
	
	jQuery('#show2').show();
     $("#but").remove();
     if (this.id == 'prevleave') {
    	 document.getElementById("ldays").value = but1_val2;
         document.getElementById("ltype").value = "Privilege Leave";
     }
     else if (this.id == 'compleave') {
    	 document.getElementById("ldays").value = but1_val1;
         document.getElementById("ltype").value = "Dubai Casual Leave"; 
     }
     else if (this.id == 'sickleave') {
    	 document.getElementById("ldays").value = but_val3;
         document.getElementById("ltype").value = "Sickness";
     }
     else if (this.id == 'vacation') {
    	 document.getElementById("ldays").value = but_val4;
         document.getElementById("ltype").value = "Vacation";
     }
    
     $("#apply").click(funcapply);
});
function funcapply()
{
  alert("HELLO CHECK THIS");
}
<div id="but">
<input type="button" id="prevleave" class="appButton1" value="Privilege Leave"> <br> <br>
<input type="button" id="compleave" class="appButton1" value="Dubai Casual Leave"> <br> <br>
<input type="button" id="sickleave" class="appButton1" value="Sickness"> <br> <br>
<input type="button" id="vacation" class="appButton1" value="Vacation"> <br> <br>
</div>
<div id="show2" class="container1" style="display:none;">
 
<label>LEAVE DAYS: </label> <input type="text" id="ldays"><br><br>
<input type="submit" class="applleave" value="APPLY LEAVE" id="apply" onclick="funcapply();">
</div>

你调用了两次 funcapply 函数。只需将输入的 html 替换为

<input type="submit" class="applleave" value="APPLY LEAVE" id="apply"/>

意味着您需要从中删除 OnClick 事件，因为它已被使用

$("#apply").click(funcapply);

将$("#apply").click(funcapply);从 onClick 事件移动到 

$(document).ready(function() {
   $("#apply").click(funcapply);
})

只有在标记准备好接收事件后，这才会接收点击事件，即在您的情况下点击事件。

JSFiddle

试试这个，

   $("#apply").click(funcapply); // when click on apply leaves
   jQuery('#compleave,#prevleave,#sickleave,#vacation').click(function(event) {
     jQuery('#show2').show();
     $("#but").remove();
     if (this.id == 'prevleave') {
       document.getElementById("ldays").value = but1_val2;
       document.getElementById("ltype").value = "Privilege Leave";
     } else if (this.id == 'compleave') {
       document.getElementById("ldays").value = but1_val1;
       document.getElementById("ltype").value = "Dubai Casual Leave";
     } else if (this.id == 'sickleave') {
       document.getElementById("ldays").value = but_val3;
       document.getElementById("ltype").value = "Sickness";
     } else if (this.id == 'vacation') {
       document.getElementById("ldays").value = but_val4;
       document.getElementById("ltype").value = "Vacation";
     }

   });
   function funcapply() {
     alert("HELLO CHECK THIS");
   }

运行演示

相关文章：