如何将值从链接传递到弹出？

Question

我正在尝试将一个值传递给我拥有的弹出窗口。我上传的经销商名单与WP商店定位器插件，每个经销商有不同的电子邮件。因此，当点击一个按钮“电子邮件经销商”，我有一个弹出式，应该从链接中得到一个“数据属性”值。

所以现在我有了弹出制造者插件，可以在这个链接上点击。但我不能从链接中传递一个值。

这是我点击的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(文档).ready(函数($) {”)将给我一个在文档准备好之后检查单击的机会。它与插件代码之外的同一个按钮链接一起工作。

是的，我在这里查过其他问题和其他资源。谢谢你的帮忙!

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

最好使用元素id作为选择器。像这样试试。

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

Answer 3

尝试使用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);