To make click-able divs, I do:
<div class="clickable" url="http://google.com">
blah blah
</div>
and then
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
});
I don't know if this is the best way, but it works perfectly with me, except for one issue:
If the div contains a click-able element, such as
<a href="...">, and the user clicks on the hyperlink, both the hyperlink and div's-clickable are called
This is especially a problem when the anchor tag is referring to a javascript AJAX function, which executes the AJAX function AND follows the link in the 'url' attribute of the div.
Anyway around this?
If you return "false" from your function it'll stop the event bubbling, so only your first event handler will get triggered (ie. your anchor will not see the click).
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
return false;
});
See event.preventDefault() vs. return false for details on return false vs. preventDefault.
$("div.clickable").click(
function(event)
{
window.location = $(this).attr("url");
event.preventDefault();
});
Using a custom url attribute makes the HTML invalid. Although that may not be a huge problem, the given examples are neither accessible. Not for keyboard navigation and not in cases when JavaScript is turned off (or blocked by some other script). Even Google will not find the page located at the specified url, not via this route at least.
It's quite easy to make this accessible though. Just make sure there's a regular link inside the div that points to the url. Using JavaScript/jQuery you add an onclick to the div that redirects to the location specified by the link's href attribute. Now, when JavaScript doesn't work, the link still does and it can even catch the focus when using the keyboard to navigate (and you don't need custom attributes, so your HTML can be valid).
I wrote a jQuery plugin some time ago that does this. It also adds classNames to the div (or any other element you want to make clickable) and the link so you can alter their looks with CSS when the div is indeed clickable. It even adds classNames that you can use to specify hover and focus styles.
All you need to do is specify the element(s) you want to make clickable and call their clickable() method: in your case that would be $("div.clickable).clickable();
For downloading + documentation see the plugin's page: jQuery: clickable — jLix
I know that if you were to change that to an href you'd do:
$("a#link1").click(function(event) {
event.preventDefault();
$('div.link1').show();
//whatever else you want to do
});
so if you want to keep it with the div, I'd try
$("div.clickable").click(function(event) {
event.preventDefault();
window.location = $(this).attr("url");
});
<div class="info">
<h2>Takvim</h2>
Click Me !
</div>
$(document).delegate("div.info", "click", function() {
window.location = $(this).find("a").attr("href");
});
Related
Having a text with annotations linking my text to dbpedia, I wanted to know if an effective way exists in Javascript for, by clicking on the link, to display a div with selected dbpedia information, rather than arriving on the page on the link ?
I am looking for some kind of "display none" on the link to allow me to display my div. I can not find this method, does it exist?
Furthermore, the links in my text are generated dynamically thanks to an Ajax request, and that they do not have id or class.
Here is one of my links in my text:
<a href="http://dbpedia.org/resource/Lorem_ipsum" title="http://dbpedia.org/resource/Lorem_ipsum" target="_blank" on>Lorem Ipsum</a>
Because the links are dynamically created you should use event delegation to get them. You can use an attribute selector to look only for links that start with a particular substring. Then use preventDefault to disable the link prior to using AJAX to grab the information and add it to a modal.
$(document).on('click', 'a[href^="http://dbpedia.org"]', function (e) {
e.preventDefault();
// load data from your source
});
DEMO
The non-jQuery version would look something like this:
document.addEventListener('click', handleClick, false);
function handleClick(e) {
const el = e.target;
if (el.tagName === 'A' && el.href.startsWith('http://dbpedia.org')) {
e.preventDefault();
// Do things
}
}
DEMO
Suppose I want to know where a click on $('#click_me') element leads.
I only know that there is $('#click_me') element on a page (and don't know if it's wrapped in anchor tag or if redirect is managed by Js).
I must avoid going to the page this element wants me to redirect to, but I want to get that page's url.
Code I have by now:
$('#click_me').click(function() {
return false; //not preventDefault so that parent elements are not triggered
}
How to determine where click event leads without actually triggering it or checking the href?
Here is how you can grab the URL without going to the page:
You need to prevent the default action... which is actually clicking the link and traveling to that page.
$('#click_me').on('click', function(e){
e.preventDefault();
console.log($(this).attr('href'));
});
http://jsfiddle.net/hck5nvwL/
My solution only works if #click_me is an <a> itself, or is wrapped in an <a> element:
$('#click_me').click(function(e) {
e.preventdefault();
var destination;
if($(this).is('a')) {
destination = $(this).attr('href');
} else if($(this).parents().is('a')) {
destination = $(this).closest('a').attr('href');
}
});
See proof-of-concept fiddle: http://jsfiddle.net/teddyrised/wx69zabp/1
Think this is a quickie for someone. I have this markup (generated by ASP.Net)...
<A id=anchorO href="javascript:__doPostBack('anchorO','')">O</A>
This anchor is in an update panel, and if I click it manually a partial postback takes place. However....
$('[ID$="anchor'+initial+'"]').click() //JavaScript
..selects the correct anchor, but no postback takes place. Why is this?
A click and a href are seen as two different things in Javascript, so you can't do .click() and call the href, regardless if this is calling javascript: or not
Two options:
Just do:
$('#anchor' + initial).click(function() { __doPostBack('anchorO',''); });
Be evil and use eval:
$('#anchor' + initial).click(function() { eval($(this).attr('href')); });
See this question here
It appears that you can't follow the href of an a tag using the click event.
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!
});
Can anyone help, seem to have an issue placing a onclick event of an anchor tag, it works on an image.. I have this
this.whereAreWe = document.getElementById('where_are_we');
this.whereAreWe.onclick = this.whereAreWe;
I have placed a A tag using the id of "where_are_we" ...
but it never executes.. if I change it to an image it works..
I also put the href="#"
Is there something special about anchor tags and applying the onclick via code?
I also tried removing the href, If I remove the href it doesn't show me the little hand icon.
I have put a breakpoint in the function and with an image it enters but using the anchor it doesn't
Any ideas?
The code you provided is confusing. The following code works correctly for me:
a link
<script type="text/javascript">
var whereWeAre = document.getElementById("whereWeAre");
function testClick() {
alert("You clicked!");
}
whereWeAre.onclick = testClick;
</script>
If your example was a little more specific we could probably be more helpful.
The are 2 problems with your javascript. The use of the "this" and the binding of the onclick event back to the reference of the DOM element for the HREF. Try this instead:
var whereAreWe = document.getElementById("where_are_we");
whereAreWe.onclick = function(){
alert("Click event on Where are We");
return false;
};
I also tried removing the href, If i remove the href it doesn't show me the little hand icon.
You need the 'href' attribute for the 'a' tag in order to specify the URL of the destination document or web resource. In case you do not specify it - mouseover doesn't change the cursor. Of course you could use CSS to modify that but that is a different question.