当按钮可见时如何触发javascript事件？答案

【问题标题】：How to trigger a javascript event when a button becomes visible?当按钮可见时如何触发javascript事件？
【发布时间】：2016-07-18 12:22:46
【问题描述】：

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

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

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

【问题讨论】：

“当它可见时单击此按钮”是什么意思。 ?你的意思是当按钮变得可见时，点击功能应该触发？
见jQuery event to trigger action when a div is made visible和jQuery when element becomes visible。
什么事件使按钮可见？
好吧，您可以编写在计时器中运行的代码并检查它是否可见。可怕的想法，但只有当您不想查看代码并查看是否有什么东西会触发它出现并捎带回来时才可以选择。
所以至少添加有问题的相关标签（angularjs？！）

标签： javascript jquery html angularjs

【解决方案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>

【讨论】：

如果您更改其他样式的按钮，您的代码会显示clicked 警报。见jsfiddle.net/zw3nzehk
@Mohammad 是的，你是对的，我现在更新了我的答案，它只会在 display 属性更改时运行点击事件。

【解决方案2】：

你可以试试这个......

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

【讨论】：

问题是我不知道它什么时候会变得可见，我需要定期检查这是个坏主意。

【解决方案3】：

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

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

这里是jsFiddle 链接

【讨论】：

【解决方案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");
}

【讨论】：

【解决方案5】：

试试这个：

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

它每 1 秒检查一次按钮是否可见，以及是否可见触发按钮点击

【讨论】：

您的超时设置为 1 秒，这意味着它可以变得可见并等待一整秒，直到执行任何操作。 OP 想知道的与元素变得可见或更改其display 属性时触发的事件更密切相关。想想事件，“当 X 发生时，Y 执行”