javascript - Jquery Doom 对我来说 - val working, focus not

Question

我有一个 div，它在 a 点击时 popedUp。我的问题非常奇怪，请查看下面的代码片段:

HTML

<a class="button highlightPopup" href="#adc" onclick="showPopup('popDiv');">Some Text</a>

<!-- pop up div basic markup -->
<div id="popDiv">
   <!-- lots of CSS and div here in between -->
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 1" id="cr_num1" onfocusout="validate()">
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 2" id="cr_num2" onfocusout="validate()">
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 3" id="cr_num3" onfocusout="validate()">
</div>

JQ

 $('a.highlightPopup').on('click', function(){
    if($('#popDiv').is(':visible')){
        console.log("ye");
        //this works            
        $('#popDiv').find('input[type=text]').filter(':visible:first').val('test');
        //below 2 don't :(
        $('#popDiv').find('input[type=text]').filter(':visible:first').trigger('click');
        $('#popDiv').find('input[type=text]').filter(':visible:first').focus();
    }else{
       console.log("ney");
    }
}

popDiv 是一个包含大量输入字段的简单 div，我想在第一个 input 上设置自动对焦，当它的 popedup 用于验证目的.非常基本的东西......对吧？

问题:

我添加了 val('test') 只是为了看看它是否工作正常，所以我在我的 div 上设置了 test 但是 tigger ('click') 甚至 focus() 都不起作用。
出现的弹出窗口不是 jquery 弹出窗口，而是作为覆盖层出现的自定义 div。

有人知道为什么会发生这种情况吗？？？

Answer 1

请看下面的代码片段演示，希望对您有所帮助!任何进一步的帮助让我知道。一旦从 Input 中聚焦出来，您的验证器函数就会调用它。

谢谢!

/*$(document).ready(function(){
	$('a.highlightPopup').on('click', function(){
        $('#popDiv').show();
        if($('#popDiv').is(':visible')){
	      $('#popDiv').find('input[type=text]').filter(':visible:first').focus();
	    } else {
	       console.log("ney");
	    }
	});
});*/


function showPopup(divId) {
  $('#'+divId).show();
  if($('#popDiv').is(':visible')){
    $('#popDiv').find('input[type=text]').filter(':visible:first').focus();
  } else {
    console.log("ney");
  }
}

function validate() {
   if ( $('#popDiv').find('input[type=text]').filter(':visible:first').val() == '') {
     alert('Please enter first input value!');
     return false;
     
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="button highlightPopup" href="#adc" onclick="showPopup('popDiv');">Some Text</a>
<div id="popDiv" style="display:none;">
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 1" id="cr_num1" onfocusout="validate();">
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 2" id="cr_num2" onfocusout="validate();">
   <input type="text" class="form-control inputMedium iconImg" placeholder="input 3" id="cr_num3" onfocusout="validate();">
</div>