How to Bind events between multiple JQUERY Function

Question

in the last days I have been working in this code, the goal was making a whole .div opening the link inside the element. Now what I would like to do is giving this href to featherlightbox, so that it could open it uIf you think there is something easier or better than featherlightbox feel free to advise it to me.

The code (not working yet) is:

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

and the documentation about the even of feather lightbox is:

    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.

Do you have any idea how can I merge these two elements togheter so that ANY link could open in a lightbox? Sorry but these are my first days touching the JQUERY. Thanks.

Answer 1

You can surely make the code snippet you've used for #myDiv more generic, for example:

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

Now the only complicated part is to provide that targetId. One possible way is by attaching it to <a> elements with data-featherlight-id (or just data-fl-id for brevity) attribute, for example:

/* 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);
});

Answer 2

Try this. It may work If not work. Search how to use trigger according your code. It can be done with 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")
    });
}