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

Question

我正在尝试将值传递给我拥有的弹出窗口。 我正在使用 WP 商店定位器插件上传经销商列表，每个经销商都有不同的电子邮件。因此，当单击“电子邮件经销商”按钮时，我会弹出一个应该从链接中获取“数据属性”值的弹出窗口。

所以现在我有了在该链接点击上工作的 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);

    });

});

Here's the result in console

我不确定问题是否出在商店定位器插件上。 上面的 JS 文件是在 before DOMContentLoaded 之前加载的。但是，我确信“jQuery(document).ready(function ($) {”会让我有机会在文档准备好后检查点击。并且它可以在插件代码之外使用相同的按钮链接。

是的，我在这里查看了关于 slack 和其他资源的其他问答。 感谢您的帮助！

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);