JS页面显示事件触发表单验证(JS pageshow event triggerring on form validation)

所以我有以下JS来显示加载GIF，而我的servlet添加一些数据，然后重定向。 当我提交表单时，它会触发点击事件没问题。 但是在它运行页面显示之后立即再次隐藏div。 这对我来说毫无意义，我仍然在同一页上。 页面显示的重点是，如果有人点击回来，页面不会卡在加载GIF上。 为什么在验证检查后会触发页面显示？ 我错过了什么

// ==== [START] Search gif hide and show ====
$("#equipSrch").click(function () {
    if ($("#search-form").valid()) {
        document.getElementById("viewSrch").style.display = 'none';
        document.getElementById("loading").style.display = 'block';
    }
});

$(window).bind('pageshow', function () {
    document.getElementById("viewSrch").style.display = 'block';
    document.getElementById("loading").style.display = 'none';
});
// ==== [END] Search gif hide and show ==== 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  
 
So I have the below JS to show a loading GIF while my servlet adds some data and then redirects. When I submit the form it fires the on click event no problem. But then right after it runs the pageshow and hides the div again. Which makes no sense to me, I'm still on the same page. The point of the pageshow was if someone clicked back, the page doesn't get stuck on the loading GIF. Why is the pageshow being triggered after the validation check? What am I missing
 
 
 
  
  
// ==== [START] Search gif hide and show ====
$("#equipSrch").click(function () {
    if ($("#search-form").valid()) {
        document.getElementById("viewSrch").style.display = 'none';
        document.getElementById("loading").style.display = 'block';
    }
});

$(window).bind('pageshow', function () {
    document.getElementById("viewSrch").style.display = 'block';
    document.getElementById("loading").style.display = 'none';
});
// ==== [END] Search gif hide and show ==== 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  
 

                
最满意答案
                
                    
                        
 我错过了一些jquery导入，有效的（）函数正在触发但是我之前错过了一个异常。 我也没能先调用validate（）函数。 
 
 
 
  
  
	// ==== [START] Search gif hide and show ====
	$("#submit").click(function() {
		$("#search-form").validate();
		if($("#search-form").valid()) {
			document.getElementById("viewSrch").style.display = 'none';
			document.getElementById("loading").style.display = 'block';
		}
	});
	
	$(window).bind('pageshow', function() {
		document.getElementById("viewSrch").style.display = 'block';
		document.getElementById("loading").style.display = 'none';
	 });
	// ==== [END] Search gif hide and show ==== 
  
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 
  
 
I was missing some jquery imports, the valid() function was firing but getting an exception I missed before. Also I failed to call the validate() function first.
 
 
 
  
  
	// ==== [START] Search gif hide and show ====
	$("#submit").click(function() {
		$("#search-form").validate();
		if($("#search-form").valid()) {
			document.getElementById("viewSrch").style.display = 'none';
			document.getElementById("loading").style.display = 'block';
		}
	});
	
	$(window).bind('pageshow', function() {
		document.getElementById("viewSrch").style.display = 'block';
		document.getElementById("loading").style.display = 'none';
	 });
	// ==== [END] Search gif hide and show ==== 
  
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>