Target _blank not being added to HTML using jQuery - javascript

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.

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.

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.

Related

why window.open() opens in the same window?

I write following code`
Holiday
<script>
a.popup.click(function(event)
{
event.preventDefault();
window.open($(this).attr('href'));
});
</script>
It'll open b.html in a new window, but opens in the same, why?
I include JQuery like this`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
Which is the latest version? Can it be a reason?
a.popup.click will throw an error because a is not defined.
You are trying to use the jQuery click method, so you need to create a jQuery object that references the element you are trying to select.
jQuery("a.popup").click(your_function)
You can achieve opening in a different tab functionality in your case by simply specifying target="_blank" for your anchor tag as
<a href="b.html" target="_blank" class="popup" >
Holiday
</a>
You please try using the following code, it works, and you can choose your title and set different parameters that are suitable for you:
$(document).ready(function(event) {
$('a.popup').on('click', function(event) {
var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
event.preventDefault();
window.open($(this).attr('href'), "Title", params);
});
});
Just change this part
<a href="b.html" target="_blank" class="popup" >
jsFiddle

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});

How come <a> tag does not produce a clickable link?

I have a link that looks like this:
<p class="half_text"><?php echo $upvotes; ?> <strong>
<a id="vote_up" style="color: #295B7B; font-weight:bold;" href="">Vote Up</a>
</strong> | <?php echo $downvotes; ?> <strong>
<a id="vote_down" style="color: #295B7B; font-weight:bold;" href="">Vote Down</a>
</strong></p>
and some jQuery code that I am trying to get called.
<script type="text/javascript">
$('#vote_up').click(function()
{
alert("up");
});
</script>
But for some reason the alert does not fire when the vote up or down links are pressed. Any idea what I am doing wrong?
You can see this for yourself here: http://www.problemio.com
You need to place your code inside the .ready() handler:
$(document).ready(function() {
$('#vote_up').click(function()
{
alert("up");
//Return false to prevent page navigation
return false;
});
});
Take a look at the .ready() docs: http://api.jquery.com/ready/
Here's a working jsFiddle.
Wrap your code in a .ready() handler. The shortcut is $(function(){...}):
$(function(){
$('#vote_up').click(function() {
alert("up");
});
})
is equivalent to $(document).ready(function(){....}).
Not sure if it's necessary but try putting a # in the href attribute.
Also, you are using id attributes for your links when there are more than one of each on the page, you should use class instead.
The id attribute is supposed to be unique across a document. If you want it to apply to multiple elements, consider using a class instead.
Not sure if this is causing your problem but you have duplicate ids on your page.
Try changing 'vote_up' and 'vote_down' to classes.

html anchor tag reference

i have an anchor tag as below.
<a style="border:0px" href='javascript:deleteAttachment(this);' />
Inside the deleteAttachment, how can i get the anchor tag. Sending this to the method, sends the window element to the method.
function deleteAttachment(ancElement){
//Jquery operation on acnElement
}
Please helop me out.
I would recommend a slightly different approach, since what you're trying to do is a bit old.
assuming you already loaded jQuery, here we go:
<a id="myFirstLink" href="someHref" />
<a class="otherLinks" href="secondHref" />
<a class="otherLinks" href="thirdHref" />
<script>
$(function() {
$('#myFirstLink, .otherLinks').click( function(event) {
// stops the browser from following the link like it would normally would
event.preventDefault();
// do something with your href value for example
alert( $(this).attr('href') );
});
});
</script>
So basically what you can do is this: simply generate all your anchors like you would normally would and apply the same class name to each of them - in my example the class would be "otherLinks".
After that, all your links will be handled by that anonymous function.
Use the onclick handler:
<a onclick="deleteAttachment(this)">
or, the cleanest and most accepted method nowadays, have just the raw link in the HTML:
<a id="deleteAttachment">
and add the click event programmatically, in a separate script block, on DOM load:
document.getElementByID("deleteAttachment").onclick =
function() { ... you can use "this" here .... }
you must set its ID attribute
<a id="myAnchor" style="border:0px;" href="javascript:deleteAttachment('myAnchor');"/>
then use jquery to find it
function deleteAttachment(ID)
{
var MyAnchor = $('#'+ID);
}

inline javascript in href

How can you do something like this:
<a href="some javascript statement that isn't a function call;" >myLink</a>
And have the js in the href execute when the link is clicked.
Just put the JS code directly in there:
fsljk
Though, you should not be doing inline scripting. You should unobtrusively attach event handlers.
<a id="lol" href="/blah">fdsj</a>
<script>
document.getElementById('lol').onclick=function() {
/* code */
};
</script>
<a href="javascript:var hi = 3;" >myLink</a>
Now you can use hi anywhere to get 3.
You can write inline-code in the same way as
<a href="javascript:[code]">
This method is also available in other tags.
addition
if you want to Execution when something tag clicking, you can fix with onClick attribute
<a onClick="function()">
I know this question is old but I had a similar challenge dynamically modifying the href attribute that sends an email when the anchor tag is clicked.
The solution I came up with is this:
$('#mailLink,#loginMailLink,#sbMailLink').click(function () {
this.setAttribute('href', "mailto:" + sessionStorage.administrator_mail_address + "?subject=CACS GNS Portal - Comments or Request For Access&body=Hi");
});
<a id="loginMailLink" href= "#" style="color:blue">CACS GNS Site Admin.</a>
I hope that helps.

Categories

Resources