如何在多个 JQUERY 函数之间绑定事件答案

【问题标题】：How to Bind events between multiple JQUERY Function如何在多个 JQUERY 函数之间绑定事件
【发布时间】：2021-02-20 09:06:35
【问题描述】：

最近几天我一直在编写这段代码，目标是制作一个完整的 .div 打开元素内的链接。现在我想做的是将此href提供给featherlightbox，以便它可以打开它。如果您认为有比featherlightbox更简单或更好的东西，请随时向我提出建议。

代码（尚未工作）是：

$('.o-neuron-hover a').on('click', function(e) {
  e.preventDefault(); // stop  link
  $("#myDiv").load(this.href, function() { 
    $.featherLight("#myDiv")
  });

关于羽毛灯箱偶数的文档是：

    Bind Featherlight

    You can bind the Featherlight events on any element using the following code:
    
    $('.myElement').featherlight($content, configuration);

    It will then look for the targetAttr (by default "data-featherlight") 
    on this element and use its value to find the content that will be opened 
    as lightbox when you click on the element.

您知道如何将这两个元素合并在一起，以便任何链接都可以在灯箱中打开吗？抱歉，这是我接触 JQUERY 的第一天。谢谢。

【问题讨论】：

$('.o-neuron-hover a').on('click', 表示容器内带有class="o-neuron-hover" 的任何链接都可以使用。由于您无法通过显示minimal reproducible example 来帮助我们，因此您得到了您所得到的。如果 .o-neuron-hover 未指向链接容器，请将其更改为可以指向的内容。如果链接有类，则更改为 $('a.o-neuron-hover').on('click',`。我会帮助你更多，但你没有发布任何 HTML

标签： jquery wordpress featherlight.js

【解决方案1】：

您当然可以使您用于#myDiv 的代码 sn-p 更通用，例如：

function loadFeatherLight(targetId, url) {
  const targetSelector = '#' + targetId;
  $(targetSelector).load(url, () => $.featherLight(targetSelector));
}

现在唯一复杂的部分是提供该 targetId。一种可能的方法是将其附加到具有data-featherlight-id（或为简洁起见仅data-fl-id）属性的<a> 元素，例如：

/* HTML */
<a href="https://example.com/content_to_load" data-fl-id="my-div">Click to load the content in my div</a>

/* JS */
$('.o-neuron-hover a').click((ev) => {
  ev.preventDefault();
  loadFeatherLight(ev.target.dataset.flId, ev.target.href);
});

【讨论】：

锚的href很可能是OP想要加载的。但他们懒得在同一问题的第三版中显示足够的信息
对不起，我只是想得出一个结论，我以为我已经提供了我能提供的所有信息，反正我不会再问什么了。谢谢

【解决方案2】：

试试这个。它可能有效如果不工作。根据您的代码搜索如何使用trigger。可以用trigger完成

$('.o-neuron-hover a').on('click', function (e) {
    e.preventDefault(); // stop  link
    $("#myDiv").trigger("load") //Extra line added
    $("#myDiv").load(this.href, function () {
        $.featherLight("#myDiv")
    });
}

【讨论】：