Jquery 我的厄运 - val working, focus not

Question

我有一个 div popedUp a click.My 问题非常奇怪，请查看下面的代码片段：

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，包含很多输入字段，我想在 popedup 时在第一个 input 上设置自动对焦用于验证 purpose.Pretty 基本内容...对吗？

问题：

我添加了 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>

Answer 2

过滤器可能 return 多行。您必须使用索引指定正确的元素。
请尝试以下操作：

$('#popDiv').find('input[type=text]').filter(':visible:first')[0].trigger('click');
        $('#popDiv').find('input[type=text]').filter(':visible:first')[0].focus();

Answer 3

所以我又进行了一些谷歌搜索，发现 setTimeout 是这里的救世主：

$('a.highlightPopup').on('click', function(){
     window.setTimeout(function(){$('#first_input_id:visible').get(0).focus();}, 100);
});

如果有人可以，请帮助理解为什么会这样！！ :\

Jquery 我的厄运 - val working, focus not

Jquery Doom for me - val working, focus not

html

javascript

jquery

dom

dom-events