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);
});
Related
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.
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
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 have this problem with a click script I have connected to a div.
The thing I'm trying to accomplish is that when you click on an URL inside the clickable div, the click event wont be called, and you will be directed to whatever the anchor is calling.
This is the JS
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button").click(function(){
var element = $(this);
var I = element.attr("id");
$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active");
return false;
});
});
</script>
And this is the html
<div class="comment_button" id="<?=$klotter_info['id']?>" style="cursor:pointer;">
<?=sanitize($klotter_info['message'])?> // Kommer i vissa fall ha länkar i sig
</div>
Any help is greatly appreciated! Thanks in advance.
make click handler for your anchor and call stopPropagation:
$('a').click(function(event){
event.stopPropagation();
});
This will disable event bubbling. and div click won't be triggered.
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);
});
});