Jquery Doom 对我来说 - val 工作，重点不是答案

【问题标题】：Jquery Doom for me - val working, focus notJquery Doom 对我来说 - val 工作，重点不是
【发布时间】：2015-12-20 07:58:06
【问题描述】：

我有一个div，它在a click 上popedUp。我的问题非常奇怪，请查看下面的 sn-p：

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>

 $('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 上设置自动对焦弹出以进行验证。非常基本的东西......对吗？

问题：

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

任何人知道为什么会发生这种情况？？？

【问题讨论】：

如果该代码是您实际拥有的所有代码，那么实际首先显示 div 的代码在哪里？只有在 div 可见后，才能对其子元素进行其他查找和过滤。
一些相关的html 和css-如果有的话，将有助于更多地理解..
@Shaunak ：正是我的观点，父母变得可见，然后只有孩子活动发生。但并非所有活动都在发生，这就是问题！
你能创建一个 jsFiddle 来演示你的问题吗？那样修复它会容易得多。
jsfiddle.net/ufwg2cLy/1 它在演示中工作。你能检查一下吗

标签： javascript jquery html dom dom-events

【解决方案1】：

请看下面的 sn-p 演示，希望对您有所帮助！任何进一步的帮助让我知道。一旦从 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>

【讨论】：

你添加了$('#popDiv').show(); ?在 DOM 上工作，但在 PopUp 上不行......伙计，我讨厌我的设计团队！！！
您看起来像#popDiv 通过单击showPopup 功能打开？
现在我已经更新了基于点击 showPopup 的 sn-p 演示，请查看

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

所以我做了一些谷歌搜索，发现setTimeout 是这里的救星：

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

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

【讨论】：