http://jsfiddle.net/UsKHa/
I've a div with return false.
How do I make a link inside this div clickable?
Especially without removing return false, because it's very specific to the plugin I use.
If you added this small function, it would work:
$('a').on("click", function(){
window.location.href = this.href;
});
This will work for any anchor that you return false (or prevent default) for.
Updated fiddle Here
$('.some a').click(function(event){
alert('clicked on link');
});
This triggers the click event for a link inside your div
You could set up another .click which refers to the link.
$('a').click(function(){ window.location.href = this.href };
See the FIDDLE
Related
I know this may seem really simple but am having trouble this end figuring out a way of selecting the class and changing ONLY that href.. here is the html ...
LEARN MORE
so far with javascript ...
$('.theclassname').click(function(){
(change the href to www.awesome.com)
});
So far really appreciate alll answers on this ... I need the href to change but not go to the url that it has changed to until the user clicks once more... so far the actual code is this ...
$('.hrefclass').click(function () {
e.preventDefault();
$(this).attr("href", "http://www.google.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});
however this does not appear to work .
LATEST
Ok so adding return false indeed works but also stops the kiwcks function from running ... how can i get around this ?
$('.hrefclassname').one("click", function() {
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
$(this).attr("href", "http://www.gooogle.org/");
return false;
});
LATEST LATEST
$('.HREFCLASSNAME').one("click", function() {
e.preventDefault();
$(this).attr("href", "http://www.GOOGLE.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});
Use
$(this).attr('href','www.awesome.com')
You can use the attr() method of jQuery to alter the links. href is the attribute here and the link is its value.
$('.theclassname').on('click', function() {
$(this).attr('href', 'http://google.com');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
LEARN MORE
In your function, the variable "this" contains the DOM element that you clicked on. Wrap it using jQuery using "$(this)", then call jQuery's attr function to set the href attribute to whatever url you'd like.
Here is a working jsFiddle: https://jsfiddle.net/57foqwaq/2/
Here's the example code:
$('.theclassname').one("click", function(e) {
e.preventDefault();
$(this).attr("href", "https://www.example.com/");
});
The following code (as others have mentioned) should work:
// notice "e" being passed to the function:
$('.HREFCLASSNAME').one("click", function(e) {
e.preventDefault();
// assuming "this" is an "<a>" tag:
$(this).attr("href", "http://www.GOOGLE.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});
This should stop the "event propagation," or in other words the link should not fire.
If this the link is still firing, you may have an issue similar to this example where the event is "bubbling up" and causing the link to fire anyway. If this is the case (which, would indicate you haven't provided a valid html example for your specific problem,) you can stop the event from propagating by replacing e.preventDefault() with this:
e.stopImmediatePropagation();
If you want an invocation to a link of theclassname when it is clicked, and then to show the text and URL of the link you can try this other option:
HTML
<a rel='1' class="theclassname" href="option1.html">Option 1</a>
<a rel='2' class="theclassname" href="option2.html">Option 2</a>
jQuery
$('.theclassname').one('click', function() {
var link = $(this);
alert (link.html());
alert (link.attr('href'));
alert (link.attr('rel'));
return false;
});
The return false prevents the link from being followed.
You just need to try:
$(this).attr("href", new_href);
And I think it might work for you.
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I want to catch all the .click() events that occurs on links on my page. Also, I want to read attributes of a link currently clicked. As far I have this, but there is a problem with it:
$("a").click(function (e) {
e.preventDefault();
$("#myPage").load("/ #myPage");
});
First of all, this code works only one out of two times - first time I click on a link, this code doesn't work, second click, this code works, third click, doesn't, etc. Why is that? Also, how can I read attributes of a link? I need to read src and class attributes.
Edit: What I need to do, is to catch whenever someone clicks on a link, stop that from happening, read href and class attributes of a link, and then proceed with loading the page (but not reloading, just replacing #myPage)
Edit2: Okay, so now the only problem is, why is it working one out of two times for me? When I load the page, then click a link, jquery works fine, but after second click, it is not hitting my $("a").click() event!
Solution: I fixed my problem by replacing .click() with .live() - now works every time. ;)
first part: How can I prevent link click:
just return false from your click event
$("a").click(function(e) { return false; });
Second part: how can I read attribute of a link
$("a").click(function(){
var href= $(this).attr('href');
alert(href);
return false;
});
see this fiddle
$("a").on('click', function(e) {
// stop click event
e.preventDefault();
// get href attribute of currently clicked item
var hrefAttr = $(this).attr('href');
// get class attribute
var classAttr = $(this).attr('class');
// do loading here
});
According to http://api.jquery.com/click/ the click() handler is potentially fired twice. Once for mousedown and once for mouseup. Perhaps you can utilize $.on('mouseup', function(e) { }); instead?
For attributes you can use:
$('a').attr('src');
In summary:
$("a").on('mouseup', function (e) {
e.preventDefault();
var src = $(this).attr('src');
$("#myPage").load("/#myPage");
});
I am trying to override the default behaviour of an anchor tag so i can load in a web page on my server into the exisiting div, rather than a new tab or window.
so far i have:
myContainer.click(function(){
event.preventDefault();
$('a').click(function(){
var link = $(this).attr('href');
myContainer.load(link);
});
});
In chrome i have to click the link twice before it does anything, in IE an FF it doesnt work at all and refreshes the page with the new link.
Any help is much appreciated.
Shouldn't it be just:
$('a').click(function(e) {
e.preventDefault();
myContainer.load(this.href);
});
Your code assigns a click handler inside a click handler. So the first click will attach the click handler to the link, and the second click (on the link) will execute the new click handler.
It seems you only need one click handler. If the links are added dynamically, you can use .on() (the successor of .live and .delegate):
myContainer.on('click', 'a', function(e) {
e.preventDefault();
myContainer.load(this.href);
});
// or
$(document).on('click', 'a', function(e) {
e.preventDefault();
myContainer.load(this.href);
});
you forgot to pass in event:
myContainer.click(function(event){
event.preventDefault();
$('a').click(function(){ var link = $(this).attr('href');
myContainer.load(link);
});
});
try to rearrange them:
myContainer.ready(function(){
$('a').click(function(event){
event.preventDefault();
var link = $(this).attr('href');
myContainer.load(link);
});
});
Good day,
I want to set click event on every anchor element in my div container. Here is an example what I want to do:
---HTML---
<div id="my-container">
page1
page2
page3
</div>
---- jQuery ----
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});
What I want to do is to let me handle loading event of href clicks and load it to the same container. And this is must done without id, class attributes which aren't available for that hrefs. The problem is in this: $("#my-container a"). Any help would be appreciated! Thanks
UPDATE
People doesn't seem to get right what I wanted to ask. I repeat myself again. $("#my-container a") <---- doesn't add click events on href anchors. So how I can set click event?
Try this, wasn't sure if you were missing any tags so I've put the whole thing in:
<script type="text/javascript">
$(document).ready(function(){
$("#my-container a").click(function(event) {
alert('test');
var link = $(this).attr("href");
$("#my-container").load(link);
event.preventDefault();
});
});
</script>
You forgot to quote the href string literal:
var link = $(this).attr("href");
^ ^
Also, you will need to cancel the default behavior of the click event. Currently, your event handler would fire, but you would not see the result, as the browser continues to follow the link you have clicked. Add a return false; as the last line of the event handling function to cancel this behavior.
Add return false;.
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
return false;
});
You can do like:
$(function(){
$("#my-container > a").click(function() {
var link = $(this).attr('href');
$('#my-container').load(link);
return false;
});
});
But if you meant that you don't want to give the div any id or class then any div having links inside it will also be affected. So you should at least give the id to the div you want to load the content in.
Have you tried it with the bind function:
$("#my-container a").bind("click", function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});