jQuery show无效

Question

我遇到了以下问题，其中jQuery show()函数没有间歇性地工作。

errorDiv默认为隐藏（在加载期间），当用户点击Enter student按钮时，我想显示错误消息，而在mouseout事件中，我将隐藏errorDiv并显示如果用户再次点击“输入学生”按钮。

当我在show()函数上设置断点时，它可以正常工作。但是，如果我在调试器外测试它，它就无法正常工作。

$(document).ready(function() {

	$('#enter').click(function(){        
    alert('show');
		$('#defaultError').text("Incorrect entry");		
		$('.errorDiv').delay(2000).show();
	});
	
  $('#enter').mouseout(function (){
    alert('hide');
		$('.errorDiv:visible').hide();
	});
	
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row.align-left">
	<div class="small-7">
		<div class="errorDiv">
			<label id="defaultError" name="defaultError" class="error"></label>
		</div>
    <div class="testDiv">
			<label id="test" name="test" class="error">Test Entry</label>
		</div>
	</div>
</div>

<button class="button" role="button" id="enter" name="enter" type="button">
					<i class="fi-plus large">Enter student</i>
</button>

Answer 1

我认为这是一个小的语法错误..请用这个替换你的点击功能代码

   $('#enter').click(function(){
     $('#defaultError').text("Incorrect entry");     
     $('.errorDiv').delay(2000).show();
   });

更新了小提琴：Updated Fiddle

Answer 2

尝试以下代码：

$(document).ready(function() {

$(document).off('click', '#enter').on('click', '#enter', function(){
   $('#defaultError').text("Incorrect entry");     
   $('.errorDiv').delay(2000).show();
});

$(document).off('mouseout', '#enter').on('mouseout', '#enter', function (){
   $('.errorDiv:visible').hide();
});

}