Target _blank not being added to HTML using jQuery

Question

I want to manipulate the DOM using jQuery. In my website, a header is being imported by a widget. I cannot edit this code directly, but a specific anchor in the header should have target _blank. When doing this, nothing happens. I get no error in my console, and nothing changes in the DOM.

I've used this jQuery code:

jQuery(document).ready(function() {
  jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>

What I have checked:

The code is being executed. When I deliberately write a syntax error, I get an error in my console.
I tried to change the code to use .remove() instead of adding the anchor, but nothing happened as well.

Assuming that the anchor has a parent element with id `iwgh2-navigation-menu-toggle-animation-wrapper` [your code works](https://jsfiddle.net/jbxw8znk/). — Andy, Sep 11 '19 at 08:25
https://jsfiddle.net/vyfp6c75/ -- this works for me, using `.attr()` and `.prop()` — TKoL, Sep 11 '19 at 08:26
Just change to: `jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank');` — skobaljic, Sep 11 '19 at 08:26
You say the header is imported by a widget. Is that an ajax request? If you're waiting for an element to become available after an ajax request [you might find this useful](https://stackoverflow.com/a/13709125/1377002). — Andy, Sep 11 '19 at 08:49
@Andy Thank you so much. That might be the problem. Thank you! — Stefan Eeckhoudt, Sep 11 '19 at 09:11

cloned · Answer 1 · 2019-09-11T08:34:53.653

-1

The id you use in your JS-code is not present in your HTML. Add it there and your code will work:

jQuery(document).ready(function() {
     jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iwgh2-navigation-menu-toggle-animation-wrapper">
  <a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>
</div>

Alternatively you can also just use jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank'); to add the attribute to every link with the classname.

edited Sep 11 '19 at 08:34

answered Sep 11 '19 at 08:27

cloned

6,346
4
26
38

`jQuery('.iwgh2-navigation-menu-toggle-animation-wrapper a')` would not work, since there is no class with that name – Carsten Løvbo Andersen Sep 11 '19 at 08:30
you are right, i forgot to delete the `a` from the selector. Thank you! – cloned Sep 11 '19 at 08:31
1

No its not the a, there is no class called `iwgh2-navigation-menu-toggle-animation-wrapper` – Carsten Løvbo Andersen Sep 11 '19 at 08:33
Thank's again, now it should be correct copy-pasting is hard. :D – cloned Sep 11 '19 at 08:35

score -1 · Answer 2 · answered Sep 11 '19 at 08:28

-1

Try using this instead: jQuery(document).ready(function() { jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank'); });

I can only assume that the parent element id does not match your selector operator.

answered Sep 11 '19 at 08:28

Josh Whiddett

39
10

This does not work as well. I'm still getting no error in the console either. Any other thoughts that might help? – Stefan Eeckhoudt Sep 11 '19 at 08:36
@CarstenLøvboAndersen I'm getting shown no error at all. – Stefan Eeckhoudt Sep 11 '19 at 08:40
test that your jquery is actually functioning by running this: jQuery('body').hide() – Josh Whiddett Sep 11 '19 at 10:03
not really sure why my answer has been downvoted as it has a valid answer? Can someone please shed some light upon this? – Josh Whiddett Sep 11 '19 at 10:13

Target _blank not being added to HTML using jQuery

2 Answers2