I'm working on a php/jQuery store and have run into the following problem:
I have a few div boxes as articles and as soon as a box is clicked, it is moved into the shopping cart and therefore has to become inactive.
That's my code so far:
$( ".artbox" ).not( ".inactive" ).on('click', function(){
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive")
})
It adds the class .inactive to two div objects, which are positioned inside each other. The rest of this function is left out here to keep it short. The problem is that while the according styles for .inactive are applied, I can still click on the box again and again and the function will be called again and again (although I have added the .not() selector) which results in having this specific article in the shopping cart multiple times - and this is what I would like to prevent. If I reload the page manually everything is fine and this
$( ".artbox.inactive" ).on('click', function(){
$(this).effect( "shake", {distance:1});
})
works, too (it doesn't for the items added without reloading).
But I am looking for a solution that works without reloading because I am displaying a popup window with a sucess message after the item was added to the cart.
JSFiddle
I've tried this here https://stackoverflow.com/a/12202186/2842292 but unfortunatly can't get it to work in my example.
Thanks in advance!
You can do it in two ways:
You unregister the event listener upon the click.
You can do it adding this to the event listener: $(this).unbind();,
You add an additional check at the very top of the listener:
if($(this).hasClass("inactive")) return;
Then if it even runs, it will quit and will not do the job.
The eventbinding happens on page load, so you should build the logic in the function:
$( ".artbox" ).on('click', function() {
if ($(this).hasClass("inactive")) {
$(this).effect( "shake", {distance:1});
} else {
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive");
}
});
Related
I am trying to make the following functions work continually as a loop as it is to control open panels in an accordion but I can only seem to get this function to run the once to add the class to the initial clicked element (upon 1st click) and once again to remove the class (upon 2nd click) from the element upon clicking another panel in the accordion. Then it no longer adds or removes classes with the click function? Please help, I am pretty new to all this! Thanks
$(document).ready(function() {
$('dt').click(function() {
//alert( "Handler for .click() called." );
$(this).next().andSelf().addClass('.openAcc');
$('dt').click(function() {
$('dt').next().andSelf().removeClass('.openAcc');
});
});
});
basically i want to be able to click on any dt element in the accordion and either turn on or off the previous/current accordions class
You are adding new click handlers every time you click, and they will be active at the same time, one will undo the effect of the other, ...etc.
It often is a bad sign when event handlers are assigned within a handler for the same event.
In fact, jQuery has a nice function for what you want: toggleClass:
$(document).ready(function (){
$('dt').click(function() {
$(this).next().andSelf().toggleClass('.openAcc');
});
});
Instead of worrying about a loop, you can just remove all .openAcc classes, then add it to the current one.
$(document).ready(function (){
$('dt').click(function() {
//alert( "Handler for .click() called." );
$('.openAcc').removeClass('.openAcc');
$(this).next().andSelf().addClass('.openAcc');
});
});
Optimized code with help from #squint
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Maybe someone can help me with the following problem.
The problem is that i'm trying to add new photo album(with jQuery) and after adding- to show new album i'm reloading DIV with jQuery .load function
$($classid).load('..')
Everything is working fine, except that after reloading function like folder hovering (where bar with buttons appear - delete,etc..on hover) just don't work.
It looks like after DIV reloading jquery is dissabled and it need's to be called out again to run all functions.
I'v tryed to add this code
<script>
$.getScript("/data/sys.js" ); // item hovering functions styling etc..
$.getScript("/data/late.js" ); //for button clicks
</script>
at reload DIV'S Content..
Everything worked fine except that when I try to add new photo album at next album adding it multiply's added folder count.. so when i add one there show's up one, at next click there is two new folders..
I'v tryed alot and I cant figure out how to stop this or do it in diffrent way..
here is late.js file that is responsible for new folder adding..
late.js file
Thanks in advance..
Does adding this code below make any difference, as the page wont load up until everything is ready.
$(document).ready(function(){
});
Try:
function loadSelectors() {
// here paste sys.js code
$('#lfd').live('click', function(e) {//form button
$.post( $("#frm1").attr("action"),//form
$("#frm1 :input").serializeArray(),//form input
function(info){
$("#ui_info_anim_s").html(info);//popup
$("#afolder").css("display","none");
$("#fn_nameid").val('New Folder');
//a lot of animation stuff for popup
$("#ui_info_anim_s").animate({top: '40px'}, 'slow', function() {
$('#load_anim_privf').fadeIn( 500);
$('#load_anim_pubf').fadeIn( 500);
$('#load_anim_privf').fadeOut(1000,function(){});
$('#load_anim_pubf').fadeOut( 500);
$(this).delay(3000).animate({top: '+=40px',opacity:'0','filter':'alpha(opacity=0)'},'slow',function(){
$(this).css({"top": "-42px","margin-top": "-42px", "opacity": "1","filter":"alpha(opacity=0)" });
});});
});
loadUp(1,'.ui_treetype','');// Reloading func
});
$("#frm1").submit( function() {
return false;
});
}
Now you need to call function loadSelectors() two times. First on document load & second where div created
This happens because when you attach event handlers to div's and then replace them you lose all event bindings.
What you need is to attach event handlers through their parent container element which stays on page regardless of reload. I think it may be the one you refer to as $classid in your code.
In this case attach event handlers this way, only once, at your page dom ready event:
$(document).ready(function(){
$($classid).on("hover", "yourSelectorHere", function() {
... your code to handle event
})
$($classid).on("click", "yourSelectorHere", function() {
... your code to handle event
})
...
})
I am trying to turn the whitespace inside the pink boxes you see below into links associated with each object. I have been trying to just make the box clickable to google.com, and numerous tries do not swap the appropriate element. My most recent attempt is looks as follows, where the first jquery function of hovering over "article" does work, but the new one below it doesn't. The page is as follows:
https://jsfiddle.net/codyc54321/zpLy3og8/1/
$( ".linkbox" ).hover(
function() {
$( this ).attr("href", "www.google.com")
}, function() {
$( this ).attr("href", "#")
}
);
I need the Archive/Edit/Delete buttons to retain their functionality, even though the sit within the larger pink box. How can I make this box clickable without overriding my other 3 buttons using jquery?
You will need to stop propagation on click of your anchor to avoid to events firing. Like below:
$('a').click(function(e){
e.stopPropagation();
});
To activate click on your outer div, you may add the below function:
$('.article-link').on('click',function(){
// Do something
});
Wrap both these function inside document.ready and you are good to go.
I am working on taking two divs, having them hidden on page load but having each drop down separately when one is clicked on. When one is active the other is hidden.
So far I have
$( '#div, #div1' ).hide(); {
$( "#div" ).click(function() {
$( "#div1" ).slideUp( "slow", function() {
// Animation complete.
});
});
But I am having trouble wrapping the click function within the initial one. The divs are being called by a picklist.
Can someone walk me through this? I would prefer a step by step example. I have very limited experience in writing jQuery and appreciate the help.
Here is the page link to which I am working on.
https://www.gdg.do/prod1/portal/portal.jsp?c=6696885&p=8296647&g=8297605
What I'm wanting to do, I want both 'Group' areas hidden on page load. Then once a selection is made in the drop down, the corresponding 'Group' slides down. When the other 'Group' is selected the first one disappears and the newly selected one is visible.
I hope that is clearer.
var $sliderDivs = $( '#div, #div1' );
$sliderDivs.click(function(e){
$(this).slideDown("slow");
$sliderDivs.not(this).slideUp( "slow", function() {
// Animation complete.
});
}
All jQuery event handlers set the context(what this is set to) to the element that fired the event.
The reason for saving a selector as a $-prefixed variable is that it is easier to maintain(changes only have to be made in one place), and it is faster(jquery traverses the dom every time you wrap a selector with $() )
EDIT: Against my better judgement I made you a quick example:
http://codepen.io/tpblanke/pen/hrlgL
Should get you where you need to be.
I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/
The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.
preventDefault() and return false do not fix the problem.
If there is anything else you need let me know but with the above link you can see everything.
Here is my current jQuery code:
$(document).ready(function() {
$('#tabnav li').click(function() {
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
});
$('#tabnav li:first').click();
});
Thanks in advance for any help!
Edit: Updated answer based on properly reading the question :-)
As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.
The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.
$(function() {
var tabItems = $('#tabnav li'); // save looking this up multiple times
$('.tab').hide(); // hide all initially
$('#tabnav li').click(function() {
// remove active class from all and store the visible tab
tabItems.removeClass('active');
var visibleTab = $('.tab:visible');
// add class to selected list item
$(this).addClass('active');
$(this.title).fadeIn(450); // show new tab
visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
});
$('#tabnav li:first').click();
});
You want to either call event.preventDefault() or add a return false; (you don't need the event for this one) to the end of the function.
By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.
JavaScript
$('#tabnav li').click(function(event) { // <-- added the eventData map
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
event.preventDefault(); // or return false;
});