I am trying to assign an anchor's onclick via javascript - see jsfiddle below:
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
var lnkA=$('.linka');
lnkA.onclick=function(){alert(this.innerHTML);};
fiddle:
https://jsfiddle.net/andrewtr/tkfvyr7o/ Code:
However, it doesn't seem to work. What am I doing wrong? Thanks!
lnkA is a jQuery object which have a method called click to register click handlers
var lnkA = $('.linka');
lnkA.click(function(e) {
e.preventDefault();//to prevent redirection
alert(this.innerHTML)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
<a id="link_b" href="http://www.duckduckgo.com">link 2</a>
http://learn.jquery.com/
http://api.jquery.com/
Related
I'm trying to check all my links for the word .obj in a certain text.
So far I've bin able to hide that link. But I need to get that link in a variable and output it to the console.
How would I do this right?
$(document).ready(function () {
//Hides all link containing .obj
$('a:contains(".obj")').hide();
//Get link in variable (DOES NOT WORK)
var $objlink = $('a:contains(".obj")');
//Show variable in console
console.log($objlink);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="#">.obj 1</a>
<a id="link2" href="#">.obj 2</a>
<a id="link3" href="#">.foobar</a>
Instead of outputting the whole jquery object, go through it and log the href.
$objlink.each(function(){
console.log($(this).attr('href'))
})
If I have this markup:
Click Here for Content 1
Click Here for Content 2
Click Here for Content 3
Click Here for Content 4
And I want to set up my fancybox observer for each of those, but I want the content of the popup set to each link's data-fancybox-content, is there a way to do that in one fell swoop?
You don't need the .each() method but use the regular fancybox initialization script to bind your selectors (or elements) to fancybox, so
<a class="fancybox" href="#" data-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a class="fancybox" href="#" data-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a class="fancybox" href="#" data-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a class="fancybox" href="#" data-content="<p>Content 4</p>"> Click Here for Content 4</a>
Notice that is not a good idea to bind javascript events to global elements (HTML tags) but use specificity (CSS selectors) instead, so we added the class fancybox to the elements we want to bind to fancybox.
Also notice that we only used data-content instead of data-fancybox-content attributes (data-fancybox-{something} is an special attribute that has no value for content)
Then you can set the content dynamically using the beforeLoad callback like :
jQuery(document).ready(function ($) {
$('.fancybox').fancybox({
beforeLoad: function () {
this.content = $(this.element).data("content");
}
});
}); // ready
See JSFIDDLE
PS. you could even set a fancybox gallery by setting a rel or data-fancybox-group attribute to your elements. You wouldn't be able to do that with the .each() method.
Figured it out, here's how I did it:
$('a').each(function() {
$(this).fancybox({
content: $(this).attr('data-fancybox-content'),
});
});
I hope to remove the link "ContactUs.aspx" of the following code, I use the code $("#Main4").contents().unwrap(); it worked, but the class "LeftMainMenu" is removed also.
I hope to remove only the link, how can I do this?
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
This will remove the href attribute:
$("#Main4").removeAttr("href")
Remember to do it on page load event like below:
$(function() {
$("#Main4").removeAttr("href")
});
Or if you just want to remove the value of href then
$("#Main4").attr("href", "")
This will make
<a id="Main4" class="LeftMainMenu" href="">Contact Us</a>
DEMO:
$(function() {
$("#Main4").removeAttr("href")
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
Your jQuery selector is wrong. Should be $("#Main4"). You can use .removeAttr() to remove the attribute of href. See the documentation here.
$("#Main4").removeAttr('href');
To remove the href you can use
$('#Main4').removeAttr('href');
To remove only the link you can use
$('#Main4').attr('href','');
if you want the link hidden, you can:
$('#main4').hide();
if you want the link disabled, you can:
$('#main4').removeAttr('href');
or
$('#main4').attr('href','#');
or
$('#main4').attr('href','javascript:void(0);');
By the way, the different href attribute about
'javascript:void(0)' and '#' is there.
My function is not fired when the tag is clicked. Here is my code:
HTML:
<div data-role="footer">
<div data-role="tabstrip" id="tabs">
Home
Settings
<a onclick="signOff()" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
</div>
</div>
JavaScript:
function signOff() {
console.log("something");
VCare.VCareWebService.signOff({cache:false,
callback:function(xml) { // invoke the service
// use jQuery to extract information we are interested in
console.log(xml);
}
});
}
You can't have both an onClick function and valid href attribute in <a>.
Change your anchor element to:
<a onclick="signOff()" href="javascript:void(0)" data-icon="settings" id="contacts">Log Out</a>
You can redirect the page using javascript if you want to.
Another way is to make sure that your onclick returns a false to stop the default event from running.
<a onclick="signOff(); return false" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
Or..
<a onclick="return signOff();" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
function signOff() {
console.log("something");
VCare.VCareWebService.signOff({cache:false,
callback:function(xml) { // invoke the service
// use jQuery to extract information we are interested in
console.log(xml);
}
});
return false;
}
you need to change your A tag to
<a href="javascript:signOff();
window.location = "views/home.html" data-icon="settings" id="contacts">Log Out</a>
I would recommend not using the onclick method. Not only does it apparently conflict with the default href operation, but it can also cause some minor visual issues where clicking in the margins of the element, etc., can call the function without highlighting the text the way you would expect in a normal link.
Instead, use:
Log Out
Then just change the page address programatically in the signOff function, using this.document.location.href = location or similar
EDIT: it's looking like window.location works better. +1 for Omar, looks like he has the same answer
I have read the following question
Javascript and Anchor Tags, Best Practice?
And it seems to suggest a solution such as the following
<a id="foo" href="#">Click Me</a>
document.getElementByID("foo").onclick = function() { alert("hi"); }
However suppose that I have a bunch of links all calling the same function with a different parameter. My quick and dirty solution would be to generate something like the following
Click Me 1
Click Me 2
Click Me 3
Is there a way to adapt the listener solution to deal with parameters?
You could use a data attribute along these lines on each element in question:
Click Me 1
And use the following callback:
document.getElementById("foo").onclick = function() {
alert(this.getAttribute('data-id'));
}
In fiddle form here.
A better option, though, might be to use jQuery to handle things. Assuming the link format above, that would look like this:
$('#foo').click(function(){
alert($(this).attr('data-id'));
});
You can use delegation.
<div id='links'>
<a href="#" class="link" data-param1='1000' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1001' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1002' data-param2='something'>click</a>
</div>
<script type='text/javascript'>
$links = document.getElementById("links");
$links.onclick=function(e){
element = e.target;
if(element.tagName="a" && element.getAttribute("class")=="link"){
console.log(element.getAttribute("data-param1"))
console.log(element.getAttribute("data-param2"));
}
return false;
}
</script>
Notice that when you have in HTML a code like that:
Click Me 1
It's exactly the same to have in JS:
document.getElementById("foo").onclick = function(event) {
myFunction('1001');
return false;
}
When the parser found an event attribute, it creates an anonymous function in exactly the same way.