want to build a function inside a href link.
should look like this
How do i complete it correct?
Use onclick to trigger a function instead of href
HTML
JS
function destroy()
{ //rest of the code
return false; // return false is use to prevent default behavior
}
Note: If you dont use return false or event.preventDefault it will execute the default behavior
There are different option for you to use.
Most of them already answered in another question.
Sum it up:
You can do it like this (the correct way):
<a id="myLink" title="Click to do something" href="PleaseEnableJavascript.html" onclick="destroy();return false;">link text</a>
What it means is that after the destroy function is called it wont direct the user to the link provided. Alternatively you can use jQuery to make a listener on the specific a href like this:
$('#myLink').click(function(){
MyFunction();
return false;
});
The rest can be read on the provided link :)
Related
so for example I have
AltaVista
for the sake of this exercise I dont want to go to the altavista site. I want to call a function that loads an alert instead...so I have tried...
<a onClick="registerHandlers(); return false;" href="//www.altavista.com">Yahoo!</a><br/>
<script>
function registerHandlers() {
alert("hi");
}
</script>
this is not working does anyone know why
I suggest you use event.preventDefault() to prevent the link's dafault link behaviour. And if want to use jquery to add some event handles, return false is not recommended as it will also prevent all other event handlers on that element from running.
function registerHandlers(e) {
if (e.preventDefault) {
e.preventDefault();
}
alert('hi');
}
<a onClick="registerHandlers(event)" href="//www.altavista.com">Yahoo!</a><br/>
I'm working with the JQuery Simple modal plugin and I would like to pass a Freemarker variable/object on the click of a link to my Jquery function.
As a test, I created an alert box to see if the value is being passed and it doesn't seem to work.
$(function() {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#hey').click(function myName(uid) {
var x = uid;
alert(uid);
return false;
});
});
HTML
<div id="disclaimer${item.uid}">
Modal data
</div>
<a onclick="myName('${item.uid}')" id="hey">Read the blog</a>
The alert box just comes up as a blank object. Any help would be appreciated. Thanks!
First off, you look like you are confusing the html onclick attribute with the jquery .click method.
<a onclick="myName('${item.uid}')" id="hey">Read the blog</a>
This will call a javascript function named "myName" and pass it a the string ${item.uid}. Note, this is a string because you wrapped it in single quotes. If you do an alert, your alert will literally say "${item.uid}".
Then you have a jquery bind event for click:
$('#hey').click({....
Ok, you need to pick one. Either use the onclick to call a javascript function or use the bind click event. Both methods can work (I prefer javascript onclick functions myself but that is just opinion).
If you want to use the jQuery bind, put a debugger; line in it so that you can step through it easily and watch. I typically use e for my event variable and e.target gets the target of the event. It will look something like this:
$('#hey').click(function(e){
debugger;
alert($(e.target).attr('data-uid'));
});
--- edit---
Adding my note below here so it is easier to read.
One thing I like to do in my onclick functions is to pass the this pointer. This is especially useful if you have multiple of the same kind of node that are calling the same function.
<a onclick="myName(this)" id="hey2">Read the blog</a>
<a onclick="myName(this)" id="hey3">Read the blog</a>
then, in the javascript you function looks like:
function myName(ptr)
{
$(ptr).....
// do some stuff
}
try using this:
function myName(uid){
alert(uid);
}
You dont need to wrap it in a jquery event handler, because you are already calling it as an onclick event from your Freemarker template.
Alternatively, you could do something like this:
<a data-uid="${item.uid}" id="hey">...</a>
And have your javascript like this:
$('#hey').click(function(){
alert($(this).data('uid'));
}
I have a link
<a id="special_link" href="" onclick="" >Link</a>
Is it possible to use Jquery in the onclick part and apply something to the current element?
Something similar with :
$("#special_link").html('test');
Update :
I want to change the content after click
I would prefer using $this so I don't depend on the id
Yes, it's possible:
<a href='whatever' onclick='$("#special_link").html("test");'>blah</a>
It's rarely necessary, though. Usually you can hook these things up later, using a selector that finds the a element and uses bind or click to hook up a handler, e.g.:
jQuery(function($) { // Function gets run at DOM load time
$("some_CSS_selector_that_finds_the_a_element").click(function() {
$("#special_link").html("test");
return false; // Do this only if you don't want the link followed (which I'm guessing you don't)
});
});
If special_link is the id of the link you want to do this on (I wasn't sure, from your question), you can simplify that:
jQuery(function($) { // Function gets run at DOM load time
$("#special_link").click(function() {
$(this).html("test");
return false; // Do this only if you don't want the link followed (which I'm guessing you don't)
});
});
More:
bind
click
$
The code you provided will work as-is in the onclick attribute, like T.J. Crowder pointed out. Is your problem using jQuery for the current element? like this:
<a href='#' onclick='$(this).html("a test link");'>a link</a>
You can refer to the current element as this.
Example:
<script ...>
$("#special_link").click(function() {
console.log(this) // You'll see the HTML element, not wrapped by jQuery
$(this).html("Bar");
})
</script>
Foo
Please, don't use onclick, rely on bind that's more generic and unobstructive.
Good luck!
If you want it inline, and it's as simple as changing the HTML, I probably wouldn't use jQuery for it.
<a id="special_link" href="#" onclick='this.innerHTML="some new value";'>click me</a>
Example: http://jsfiddle.net/8ucGB/2/
I have elements being generated by dynamic html, I would like to reference the particular href that is calling the function when one of many may be calling it.
Link
Does not work when I try to reference $(this). Is there another way to do this or do I have to make dynamic ids?
Link will work if you want to pass the href.
However, onsomething handlers in the html code are not jqueryish at all.
Give your links a class and setup a live handler:
$('.mylink').live('click', function() {
// do whatever you want with this or $(this) or this.href or $(this).attr('href')
});
putting the js parts in the href attribute is a bad idea. best practice is adding a handler with addEventListener but here you can get away with setting onclick directly.
Link
and your function would be like
function Foo(e) {
var a = e.target || e.srcElement;
// TODO: stuff
if (e.preventDefault) {
e.preventDefault();
}
else {
return false;
}
}
so when you click the link, Foo is called with the event as a paremeter. the event object has a reference to the source element, either as target in standards browsers or srcElement in IE. the preventDefault/return false; combo at the end prevents the browser from "following" the link to #.
edit: on second thought, since you have many links, using jquery to add handlers the recommended way is probably better (although the first solution is still fine).
...
<a id="A5" href="#" >Link</a>
<a id="A6" href="#" >Link</a>
<a id="A7" href="#" >Link</a>
...
<script>
$('a').click(Foo);
</script>
No point in using the javascript: pseudo protocol handler.
Use
Link
instead.
I have a problem with <a> tags.
I need to reassign an onclick event to this tag, but the href attribute must contain a link.
For example, I have some link:
Wikipedia
And i need to change only the onclick event for this link so that when I click on it, some JavaScript function is called.
Don't forget to return false in 'onclick', or browser will handle click and open link in href.
<a href="http://en.wikipedia.org" onclick="yourfunction(this); return false;" >Wikipedia</a>
Not sure what you mean, but try this:
$(function() {
// Find all links pointing to wikipedia
$("a[href*='wikipedia.org']").click(function() {
// Do something
return false; // to prevent the link from actually going to wikipedia
});
});
but href attribute must contain a link
If you provide a link then the page will be redirected there, so you might want to do this:
Wikipedia
This makes sure that you perform your functions first and finally redirect function to redirect the page to the url you specify.
The simplest way would be to give your link an id, ie
Whatever
Then simply assign an onclick via jquery like so:
$("a#myLink").click(function() {
//Go wild!
});