如何在按钮变为可见时触发javascript事件？

Question

我正在使用一些第三方js和html库（我不想更新这个库）。 HTML中有一个“全部应用”按钮，我想要做的是“当它变为可见时单击此按钮”。

<div class="confirm" ng-show="newFilters.length">
    ....
    <button class="btn btn-primary">Apply All</button>
</div>

编辑：当按钮变为可见时，应触发单击功能。

Answer 1

您可以尝试MutationObserver ，它将侦听元素的css中的更改，然后您可以在发生更改时运行click事件。

 setTimeout(function() { $('button').css('display', 'block'); }, 2000); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if ($('button').css('display') !== 'none') { $('button').click(); } }); }); observer.observe(document.querySelector('button'), { attributes: true, attributeFilter: ['style'] }); $('button').click(function() { alert('clicked'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-primary" style="display: none;">Apply All</button> 

Answer 2

你可以尝试这个....

if($('#Element_name').is(':visible'))
{
    // you code goes here
}

Answer 3

作为epascarello，我们可以使用计时器来检查按钮是否可见。 因此，您可以在代码中使用setInterval 。

setInterval(function(){
  if($("#show").is(':visible')){
    console.log("run the code");
  }
},2000);

这是jsFiddle链接

Answer 4

你可以简单地做：

<div class="confirm" ng-show="newFilters.length">
    ....
    <button ng-click="newFilters.length && myFunction()" class="btn btn-primary">Apply All</button>
</div>

在控制器中：

$scope.myFunction(){
    console.log("hello");
}

Answer 5

尝试这个：

setInterval(function(){
  if($("button.btn").is(':visible')){
    $(this).trigger('click');
    alert('button click');
  }
},1000);

每1秒检查一次该按钮是否可见，如果可见触发按钮单击