How to trigger a javascript event when a button becomes visible?

Question

I am using some third party js and html library(I don't want to update this library). There is an "apply all" button in HTML and what I want to do is "click this button when it becomes visible."

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

EDIT: When the button becomes visible click function should trigger.

What do you mean by "click this button when it becomes visible." ? Do you mean when the button becomes visible, click function should trigger? — Arun AK, Jul 18 '16 at 12:24
See [jQuery event to trigger action when a div is made visible](http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible) and [jQuery when element becomes visible](http://stackoverflow.com/questions/20487472/jquery-when-element-becomes-visible). — Mohammad, Jul 18 '16 at 12:25
Well you can write code that runs in a timer and checks if it is visible. Horrible idea, but only option if you do not want to look at the code and see if there is something that triggers it to show up and piggy back off that. — epascarello, Jul 18 '16 at 12:25
What means 'visible'? If scrolled to screen, or added to the DOM or changing any css property to make it visible??? — A. Wolff, Jul 18 '16 at 12:33
@A.Wolff Do we need angularjs to trigger button click event? — hellzone, Jul 18 '16 at 12:38
@hellzone No but the way you are thinking about your workaround seems wrong. This is something you should handle the angular's way, not the jQuery's one — A. Wolff, Jul 18 '16 at 12:40

Nenad Vracar · Accepted Answer · 2016-07-18T14:39:52.623

3

You can try MutationObserver that will listen for changes in css of element and then you can run click event when change happens.

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>

edited Jul 18 '16 at 14:39

answered Jul 18 '16 at 12:52

Nenad Vracar

118,580
15
151
176

Your code display `clicked` alert if you change another style of button. See https://jsfiddle.net/zw3nzehk/ – Mohammad Jul 18 '16 at 14:11
@Mohammad Yes you are right, i updated my answer now it will run click event only when `display` property is changed. – Nenad Vracar Jul 18 '16 at 14:40
See interessting approach "ClassWatcher" from TecWisdom [here](https://stackoverflow.com/questions/10612024/event-trigger-on-a-class-change). It wraps MutationObserver. – chmich Oct 20 '22 at 14:34

score 0 · Answer 2 · answered Jul 18 '16 at 12:29

0

you can try this....

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

answered Jul 18 '16 at 12:29

Amar Srivastava

373
3
10

Problem is I dont know when it will become visible and I need to check periodically which is bad idea. – hellzone Jul 18 '16 at 12:30

score 0 · Answer 3 · answered Jul 18 '16 at 12:38

As epascarello, we can use a timer to check whether the button is visible or not. So, you can use setInterval in your code.

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

Here is the jsFiddle link

score 0 · Answer 4 · answered Jul 18 '16 at 12:39

0

You can simply do:

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

In controller:

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

answered Jul 18 '16 at 12:39

Rahul Arora

4,503
1
16
24

webdevanuj · Answer 5 · 2016-07-18T17:30:02.653

0

try this:

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

it check every 1 second that button is visible or not and if visible trigger button click

edited Jul 18 '16 at 17:30

answered Jul 18 '16 at 13:31

webdevanuj

675
12
22

1

your timeout is set to 1 second, meaning it can become visible and wait one full second until anything executes. What the OP wants to know is more closely related to an event that fires when an element becomes visible, or changes its `display` property. Think of events, "when X happens, Y executes" – Purefan Oct 10 '16 at 12:21

How to trigger a javascript event when a button becomes visible?

5 Answers5