javascript - Jquery 点击事件未在超时函数中触发

Question

我想在一个按钮可见时触发一个点击事件。由于某些原因，该按钮大约需要 1 秒才能在页面中可见。因此，我们将此函数设置为超时，以检测按钮何时出现并触发点击我已经尝试过，但由于某种原因，点击事件没有被触发，按钮的外观检测是正确的，只有点击事件不起作用。这些是代码:

“cta”是按钮 ID。

$(function checkBotaoApareceu(){
  console.log('teste');
  if($('#cta').is(':visible')){
    setTimeout(function(){
      $('#cta').click();
      console.log('click');
    }, 2000);
    return;
  }                        
  setTimeout( checkBotaoApareceu, 10 );
});

这是我的按钮点击事件处理程序

$('#cta').click(function(event){
    event.stopPropagation();
    $('#cta').hide();
    blocoAmarelo = $('div .bloco-amarelo');
    $("#the_lights").css('height',$(document).height());
    $("#the_lights").css('display','block');
    $("#the_lights").fadeTo(1000,0.8);
    blocoAmarelo.show();
    blocoAmarelo.click(function(event){
        event.stopPropagation();
    });
});

$('html').click(function() {
    if(document.getElementById("the_lights").style.display === 'block'){
        document.getElementById("the_lights").style.display="none";
    }
});

注意:此处需要调用 stopPropagation 来保留某些 div 样式。

Answer 1

我仍然不知道是什么导致了错误。但经过一番研究后，这个解决方案对我有用。

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}

$(function(){
    var id = setInterval(function (){
        if ($('#cta').is(':visible')) {
            eventFire(document.getElementById('cta'),'click');                
            clearInterval(id);
        }
    }, 100);
});