Как передать значение из ссылки на всплывающее окно?

Question

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

Итак, теперь у меня есть плагин Popup Maker, который работает по этой ссылке. Но я не могу передать значение из ссылки.

Вот мой js файл для этого клика

jQuery(document).ready(function ($) {
    console.log("Here's console output");  // I get this in console
    $('.emailDealerBTN').click(function(){
        console.log("Clicked button");    // Nothing in console
        emailDealer=$(this).attr("data-emaildealer");
        console.log(emailDealer); // Nothing in console

    });
});

А вот код из плагина локатора магазина, который формирует эту кнопку- ссылка:

$listing_template .= "\t\t\t" . '<div class="button-wrapper"><a href="#" class="button-red button emailDealerBTN" id="emailDealerBTN" data-emailDealer=<%= formatEmail( email ) %> >Email a dealer</a></div>' . "\r\n";

Таким образом, я пытался иметь ту же дорожку на нажатой кнопке вне кода «плагина локатора дилера»:

jQuery(document).ready(function ($) {
    console.log("Here's console output");
    $('.emailDealerBTN').click(function(){
        console.log("Clicked button");
        emailDealer=$(this).attr("data-emaildealer");
        console.log(emailDealer);

    });
    $('.locator-cta').click(function(){
        console.log("Clicked Apply to become a dealer");
        link=$(this).attr("href");
        console.log(link);

    });

});

Вот результат в консоли

Я не уверен, что проблема связана с плагином поиска магазина. Файл JS выше загружается до DOMContentLoaded. Однако я был уверен, что «jQuery (document) .ready (function ($) {» даст мне возможность проверять клики после того, как документ будет готов. И он работает с той же ссылкой кнопки вне кода плагина.

Да, я проверил другие вопросы и ответы здесь на слабину и другие ресурсы. Спасибо за вашу помощь!

Answer 1

Возможно, проблема в том, что ваше click() событие вызывается до того, как сгенерирована кнопка ..

Используйте метод .on() jQuery.

.on() разрешите добавить события на динамически загружаемом контенте.

Попробуйте: -

$(document).on('click','.emailDealerBTN',function(){
    console.log("Clicked button");
    var emailDealer = $(this).data("emaildealer");
    console.log(emailDealer);
});

Answer 2

Попробуйте использовать событие on, чтобы убедиться, что ваш сценарий по-прежнему будет работать, если элемент html добавлен или изменен динамически. Это также плохая практика, чтобы определить вашу переменную глобально.

( function($) {

    $(document).ready( function() {
        console.log('My script loaded')
    });

    $('body').on('click', '.emailDealerBTN', function() {
        var emailDealer = $(this).data('emaildealer'); // or $(this).attr('data-emaildealer');
        console.log('Clicked button');
        console.log(emailDealer); 
    });

})(jQuery);

Answer 3

лучше использовать идентификатор элемента в качестве селектора. Попробуй вот так.

$(document).ready(function(){
  $('#emailDealerBTN').click(function(){
    alert($(this).attr('data-emailDealer'))
  });
});