when i click on gallery, and visit for example "paintings", the links on the menu stops working, why is this? can someone please tell me whats wrong -_-
http://madebysam.se/elbarco
This is the code im using
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
$('ul li').on('click',function(event) { event.stopPropagation(); })
});
});
Using dev tools and a breakpoint inside your example code snippet on your live site, I see that only the links loaded initially trigger your event handling code.
The problem is here:
$('a').on('click',function(){
// do stuff
});
The common pitfall is that you register this handler against all anchor tags that are loaded in the page at that moment. Any anchor tags dynamically added later will not enjoy that same event handler.
A workaround is to use a different syntax, targeting first a larger tag that is guaranteed to be there on first load, and then filter down to the anchor tags:
$('body').on('click', 'a', function(){
// do stuff
});
Related
I'm using a Visual Composer Wordpress Shortcode to generate an Accordion. When I click on the tabpanels there is an anchor link which is linked to the panel body and opens it, however the body scrolls to the anchor link but I want to prevent the scrolling. I've already tried everything I could find such as
$('body, html').stop();
preventDefault();
return false;
stopPropagation();/stopImmediatePropagation();
However, after some trying around the only thing that is working right now, is the following code:
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(){
e.preventDefault();
});
});
Well, with this "solution" I'm getting an error, of course, for undefined e, on every click. But I can't quite understand why it would work like I want that way.
Can anyone help me and find a solution which will work error-free?
You can try stopImmediatePropagation instead preventDefault.
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(e){
e.stopImmediatePropagation();
});
});
My jQuery script is a popup window to my website when you click a button.
The buttons are in table, in a foreach loop. Things works just fine there.
The problem is, if i click product 1, the popup window works as it should, but when i close the window and try to popup it again, it not works. It will work again if refresh the page. It seems to work only once per button, then i need to refresh page..
The jQuery script is here:
;
(function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').bind('click', function(e){
var $tr = $(e.currentTarget).closest('tr'),
$content = $tr.find('#wiki-content');
$content.bPopup();
});
});
})(jQuery);
Thanks in advance :)
EDIT:
Thanks a lot for all answers. The rest of code can you look at this pastebin code!
Pastebin
use following
$(document).on('click','.wiki-button', function(e){
I think you are repeating the id wiki-content
Sorry to add as answer.
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 working on a hand me down project that was written by someone who was clearly better at HTML and JavaScript than myself. The html has AJAX links like this:
<ul class="subNav">
<li><a link="contacts.html">Contacts</a></li>
<li><a link="contacts_add.html">Add Contact</a></li>
</ul>
Which I think are handled in this code:
$('.subNav li a').click(function() {
var href = $(this).attr('link')
$('#mainStage').load(href, function() {
pageLoad();
})
})
All of the code above works perfectly.
My problem is I can't seem to recreate this functionality. I am using this HTML:
<div class="nameTitle colorOne"><a link="contacts_add.html">
<span class="firstNameField">Contact Name</span>
</a></div>
and this JavaScript:
$('.nameTitle').click(function() {
alert('')
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
})
})
When I click the "nameTitle" class it should load contacts_add.html into the mainStage section of the page but I cannot see anything happen. I am sure someone fluent with this style of coding could tell me why my event never fires but the earlier code does.
Thanks in advance,
You should try altering your code to something like this:
$('.nameTitle').click(function() {
//This line finds the address to load
var address = $(this).children("a").attr("link");
//This line loads the address and then runs the pageLoad function when it has completed
$('#mainStage').load(address, function() {
pageLoad();
});
});
If this doesnt work it may be because the html is loaded dynamically. In this case you need to use .on, see this link here.
In response to Brett's comment below ive put together a jsfiddle showing .on in action here. Also i added .preventDefault as this could cause a problem.
try with
$('.nameTitle a').click(function() {
It can be that you're trying with a browser which accepts click only on 'a' tags, albeit they're getting rare hopefully.
The 'click' event will never be raised on your div, since there is an inner a element with an href defined. Once you click, the event will be raised on the anchor link first which will, by default, redirect to the location specified by the href. In order to get this working, catch the click when it is raised at the a:
$('.nameTitle a').click(function(e) {
e.preventDefault(); // prevent browser from following href
alert('');
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
});
});
Demo -- Commented out the load, since that page isn't on this server. Also notice I changed your a element to have attribute href instead of link.
I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.
the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)
$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});