jquery селектор для будущего элемента, если он виден

Question

Одно из моих ajax всплывающих окон загружается слишком поздно. Поэтому мое условие jquery для проверки видимости не работает.

$(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;
           }
        });
    };
});

кажется, что "is (': visible')" проверяет только для элементов, загруженных dom. Как я могу применить эти условия и к будущим элементам?

Отправить изображение корзины по электронной почте

Отправить изображение корзины по электронной почте

При нажатии на эту кнопку «Электронная корзина» появляется много текстовых полей при нажатии любого из них, мой код должен работать. Я использую инструмент tempormonkey, с помощью которого я вставляю свой код на веб-сайты, но мой код не работает, когда я внедряю его с помощью tempormonkey, а вместо этого работает с консолью.

Answer 1

Невозможно написать такой код, который будет выполняться в будущем, но мы можем отслеживать это при щелчке документа, потому что вы говорите, что при нажатии кнопки Электронная корзина вы хотите выполнить его.

Надеюсь, это решит вашу проблему, попробуйте: -

$(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;
    });
});

Answer 2

Сделайте наоборот: проверьте видимость в функции-обработчике.

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

Если элементы input и select загружаются динамически, используйте делегирование событий, как описано в Привязка событий к динамически создаваемым элементам? . Но это не меняет лог c проверки видимости корзины.