jquery selector for future element if visible

Question

One of my ajax popup is loading too late.so my condition of jquery to check visibility is not working.

$(document).ready(function() {

    if($('#emailCart').is(':visible')){
        alert('yes');
        let shouldFire = true;
        $("input, select").click(function(){
         if(shouldFire) {
            alert('sent');
            sendGAEvent('Email', 'click','Email Cart');
            shouldFire = false;
           }
        });
    };
});

seems "is(':visible')" only checks for dom loaded elements.How can i apply this conditions to future elements also.

Email cart image

When clicking on this Email cart button many textboxes appear on clicking any one of those my code should work. I am using a tool tempormonkey by which i inject my code to websites.But my code is not working when i inject using tempormonkey but instead works with console.

Please share whole function with `.ready`. i think you defined you function inside `.ready` method. — Devang Hingu, Jul 13 '20 at 05:04
You can't, nobody knows the future, not even jQuery. If you're populating something with AJAX, do everything related to the new elements in the AJAX `success` handler. — Teemu, Jul 13 '20 at 05:12
@Teemu i don't have access to the main code. And methods like .on() works for future elements. — pravin mishra, Jul 13 '20 at 05:13
`on` doesn't work for future elements, with `on` you set a listener to an exisiting element, and when the event fires, `on` takes the advantage of the event bubbling system, it's not magic. — Teemu, Jul 13 '20 at 05:14
@Teemu thankyou i didn't new that.Sorry i am new to jquery.BTW plesae help. — pravin mishra, Jul 13 '20 at 05:17
@pravinmishra just move your function outside of `.ready` method. it will surely works — Devang Hingu, Jul 13 '20 at 05:18
Is this `#emailCart` the pop-up "loaded too late"? If it is, you could put up a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to track occurring of the pop-up. — Teemu, Jul 13 '20 at 05:24
You're doing this backwards. You should add the event handler to the elements unconditionally. The event handler function can check whether the element is visible, and return if not. — Barmar, Jul 13 '20 at 05:29
And you can use event delegation if the input elements are loaded dynamically. — Barmar, Jul 13 '20 at 05:29
@Barmar i am not getting it.I am new to jquery.Please provide answer. — pravin mishra, Jul 13 '20 at 05:31
@pravinmishra You are saying that its related to ajax popup but your code does not contain any AJAX code. Please update it also. — Deepak Dixit, Jul 13 '20 at 05:33
@DeepakDixit i don't have access to complete code i am using addon extension tempormonkey to add my code to a website. — pravin mishra, Jul 13 '20 at 05:37
You didn't consider Tampermonkey being an important information to add to your question ..? — Teemu, Jul 13 '20 at 05:47
The trick is to register the EventHandler with $(document).on('click', '.yourclass', functionName) If you do so, you are registering that event dynamically that is able to trigger the event after the Target Element is created after loaded. you know what I mean? If not google for $(document).on() method. — Gkiokan, Jul 13 '20 at 07:25

Barmar · Answer 1 · 2020-07-13T05:35:02.713

0

Do it the other way around: check the visibility in the handler function.

$(document).ready(function() {
  $("input, select").click(function() {
    if ($('#emailCart').is(':visible')) {
      alert('sent');
      sendGAEvent('Email', 'click', 'Email Cart');
    }
  });
});

If the input and select elements are loaded dynamically, use event delegation as described in Event binding on dynamically created elements?. But that doesn't change the logic of how to check for visibility of the cart.

edited Jul 13 '20 at 05:35

answered Jul 13 '20 at 05:31

Barmar

741,623
53
500
612

i am applying this to this website using tempormonkey tool.https://qa1.thermofisher.in/chemicals/shop/cart/ – pravin mishra Jul 13 '20 at 05:40
See it where? Please update the question with the HTML. – Barmar Jul 13 '20 at 05:42
If the inputs are in the popup, you don't even need the conditional. If it's not visible, they can't click on it. – Barmar Jul 13 '20 at 05:43
@Barmer i have updated the question. Thier are multiple inputs in the website i want this condition only for some inputs only when a particular id apperas. – pravin mishra Jul 13 '20 at 05:49
please help i am stucked. – pravin mishra Jul 13 '20 at 06:05
I asked you to post your HTML. Also, do you want the click handler just for certain inputs? Then you need a more specific selector, like `$("#emailCart").find("input, select")` – Barmar Jul 13 '20 at 14:01

score 0 · Answer 2 · answered Jul 13 '20 at 07:06

0

Its not possible to write such code which will execute in future but we can monitor that on click of document because you are saying that on click of Email Cart button you want to execute it.

I hope it will resolve your issue, try it:-

$(document).on('click', function (e) {
    if (!$('#emailCart').is(':visible')) return;

    alert('yes');
    let shouldFire = true;

    $("input, select").click(() => {
        if (!shouldFire) return;
        alert('sent');
        sendGAEvent('Email', 'click', 'Email Cart');
        shouldFire = false;
    });
});

answered Jul 13 '20 at 07:06

Deepak Dixit

1,510
15
24

Dit not working.I noticed its preloaded and just the display property of css is changing to none when not clicked on email cart button. – pravin mishra Jul 13 '20 at 07:25
What do you mean by preloaded? – Deepak Dixit Jul 13 '20 at 07:30

jquery selector for future element if visible

2 Answers2