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，我想在其 popedup 的第一个input上设置自动对焦以进行验证.Pretty基本内容.. .right？

问题：

我添加了val('test')只是为了查看这是否正常，所以我在我的div上设置了test，但tigger('click')甚至focus()无法正常工作。
弹出窗口不是一个jquery pop，而是一个定制的div作为叠加层。

任何想法为什么会发生这种情况???

Answer 1

请看下面的片段演示，希望对您有所帮助！任何进一步的帮助让我知道。一旦从输入焦点输出您的验证器函数调用它。

谢谢！

/*$(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

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

$('#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 Doom对我来说 - val工作，不关注

3 个答案: