CODEWITHSUNDEEP
jquerywordpress
Armando V.
Armando V.

Reputation: 3

How can I add a specific code into my link? Jquery

My code is working as I wanted, but I'm doing something wrong at the end part. I need to add data-featherlight="iframe" after the href link. I'm seeing that right now the only thing happening it's not an addiction between the 2 elements, but a substitution, that's not what I'm looking for.

What am I doing wrong? I just need the end link to be something like: www.link.com data-featherlight="iframe", so that it would make the widget I'm using on wordpress opening a lightbox.

$('.o-neuron-hover').click(function() {
  window.location = $(this).find("a:first").attr("href", 'data-featherlight="iframe"');
  return false;
});

Upvotes: 0

Views: 51

Answers (1)

Eriks Klotins
Eriks Klotins

Reputation: 4180

HTML attributes order normally does not matter, thus you need to write:

$('.o-neuron-hover').click(function(){
        window.location = $(this).find("a:first").attr("data-featherlight" , "iframe");
        return false;
    
});

UPDATE: I quickly skimmed the Featherlight documentation..

When you add the data-featherlight attribute in HTML on the server, the library attaches the right event handlers when DOM is loaded. However, if you wish to create links on the fly (like in your example) you need to manually attach the event handlers.

See here: https://github.com/noelboss/featherlight/#bind-featherlight

I making some guesses here, but the code you need looks something like:

$('.o-neuron-hover a:first').featherlight('iframe', {});

Upvotes: 1

Related Questions