hi this is my code http://jsfiddle.net/Xy4dF/1/
i have this part:
$('#top-user').on('click', function () {
alert('1');
});
$('.user').on('click', function () {
alert('2');
});
now out of this code i want to trigger in sequence the 2 elements clicks
so i do:
$('#top-user').click(function () {
$('.user').click();
});
What is wrong? :O
Is the following what you're after (I'm not 100% sure I've understood the question)
$(function () {
$('#top-user').on('click', function () {
alert('1');
});
$('.user').on('click', function () {
alert('2');
});
$('#top-user').click(function () {
$('.user').click();
}).click();
});
The reasons your original code didn't work is that:
You had defined the event handlers but not triggered any on page load.
You need to define an event handler before you trigger it. This is because when triggering an event, JQuery fakes it by immediately calling the bound event handlers rather than managing to genuinely trigger the event at browser level.
Hope this helps
Related
my intention is to write code that toggles back and forth when any of the two buttons are clicked , its simple code but not working as expected:
$('#pup_container').load('plst_main_f/login_form.php').hide();
$('#login_activate').click(function (e) {
e.preventDefault();
$('#pup_container').fadeIn(950);
});
$('#button_img').click(function () {
$('#login_wrapper_background').slideToggle(755);
});
works fine the first time around, but isn't TOGGLING like its supposed to, the toggle happens once and its probably because they are triggered with different buttons but i'm not quite sure, please help
code here is part of the ready function.
Since the button_img is loaded dynamically, you need to bind the handler after the element is loaded dynamically
$('#pup_container').load('plst_main_f/login_form.php', function () {
$('#button_img').click(function () {
$('#login_wrapper_background').slideToggle(755);
});
}).hide();
$('#login_activate').click(function (e) {
e.preventDefault();
$('#login_wrapper_background').toggle(950, function () {});
});
Or use event delegation
Let's say I have the following events:
$(button).on('mouseup', function (event1) {
$(something).show();
$(document).on('mouseup', function (event2) {
$(something).hide();
});
});
So, it shows "something" when button is clicked and hides it when the document is clicked. How can I make sure the second evnet doesn't trigger in the same event that created it? right now the something will show and hide instantly (at least on firefox).
I need to do this without any globals of any kind, preferably.
How about this:
$(button).on('mouseup', function (event1) {
$(something).show();
event1.stopPropagation();
$(document).one('mouseup', function (event2) {
$(something).hide();
});
});
stopPropagation() will stop the event from going past the button (to the document).
one() will only run the event once and then go away... can be recreated again with another click on the button.
JSFiddle
Here's another solution that doesn't rely on timestamps:
$("button").on('mouseup', function (event1) {
$("#something").show();
setTimeout(function () {
$(document).one('mouseup', function (event2) {
$("#something").hide();
});
}, 0);
});
demo
Using setTimeout with a delay of 0 will make it execute the code as soon as it's finished with this event. Also note I'm using one rather than on because you only need this event handler one time and without it you will end up attaching unlimited numbers of event handlers, every single one of which will need processing when a mouseup fires anywhere on your page.
A less silly solution might look like this:
$("button").on('mouseup', function (event1) {
$("#something").show();
});
$(document).on('mouseup', function (event2) {
if(event2.target != $("button")[0]) {
$("#something").hide();
}
});
demo
Why don't you isolate the event like so:
$(button).on('mouseup', function (event1) {
$(something).show();
});
$(document).on('mouseup', function (event2) {
$(something).hide();
});
I ended up using the event.timeStamp property to check if the two events are distinct. Also added an unbind and a namespace to the document event to prevent event stacking.
$(button).on('mouseup', function (event1) {
$(something).show();
$(document).on('mouseup.'+someIdentifier, function (event2) {
if(event1.timeStamp != event2.timeStamp) {
$(something).hide();
$(document).unbind('mouseup.'+someIdentifier);
}
});
});
I have a Rails 3.2 app with a menu toggle div for displaying a horizontal nav menu. After the back or forward button is clicked, a click of the div no longer toggles the menu. I have tried using event delegation and pjax events to fix this issue, but nothing seems to work.
When event delegation and/or pjax events aren't used the toggle works correctly on full refresh and pjax requests, but breaks on back/forward button. When I add delegation or pjax events in different combos, the problems occur. Here are several different scripts I've tried. I'm getting very weird results, working sometimes and not others... I'm concerned I may not be combining them correctly. These are all wrapped in script tags on the particular view, vs in application.js. Thanks for your help!
1. No event delegation, works besides back/forward
$(document).ready(function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
2. With event delegation, works SOMETIMES, never for back/forward
$(document).ready(function() {
$(document).on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
3. With pjax:end event inside document ready
$(document).ready(function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
$(document).on('pjax:end', function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
});
4. With pjax:end outside document ready
$(document).ready(function() {
$(document).on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
$(document).on('pjax:end', function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
I moved the event delegated script to application.js inside document ready.
$(document).ready(function(event) {
$('body').on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
I have one javascript function and I want run it on two diferent events - document.ready and window.scroll. How to do it?
Guessing you're using jQuery (document.ready and all).
Attaching the event handler to the window after document.ready, and then triggering the event immediately fires the handler on document.ready and on every scroll event.
$(document).ready(function() {
$(window).on('scroll', function() {
// do stuff
}).trigger('scroll');
});
or to reference a function
$(document).ready(function() {
$(window).on('scroll', myJavascriptFunction).trigger('scroll');
});
function myJavascriptFunction() {
// do stuff
}
call it like
$(document).ready(function(){
$(window).scroll(function(){
//some func
});
//same func
})
also use it like this on onscroll
If u want it on doc.ready too then write 2nd time too(though its not a good idea.)
Right, I'm getting quite aggitated with this. I'm probably doing something wrong, but here's what I'm doing:
$(document).ready(function () {
$('#somebutton').click(function () {
openPage1();
});
$('#someotherbutton').click(function () {
openPage2();
});
});
var openPage1 = function () {
$('#iframe').attr('src', 'someurl');
$('#iframe').load(function () {
$('#button').click();
});
};
var openPage2 = function () {
$('#iframe').attr('src', 'anotherurl');
$('#iframe').load(function () {
$('#anotherbutton').click();
});
}
Whenever I click somebutton everything goes as expected. However when I click someotherbutton. The .load() from openPage1() is called first and I can't find a way to stop that. The .load() from openPage1() has a button with the same name, however on openPage2() I need to modify the contents before clicking the buttons.
I need to use .load() because I can't click the buttons before the document is ready.
Basically what I need is two seperate .load() instances on the same iframe, that don't fire off on each other.
Besides that, maybe my understanding of jQuery/JS is wrong, but shouldn't the .load() events only be listening after clicking the corresponding button?
Can someone help me out, this has been keeping me busy all afternoon.
Try using on, and once loaded, unbind
$("#iframe").on("load", function(){
$(this).off("load");
$('#button').click();
});
That way you remove the handler you put up before the second button is clicked?
By writing : $('#iframe').load(function (){ $('#button').click(); });, you are adding a listener on the load event, which will stay and be re-executed on each subsequent reload of the iframe.
Here is a jsfiddle to demonstrate this : click on the "reload" button, and see how many times the "loaded" message appears in your console.
in your case, if you click on #somebutton, then on #someotherbutton, after the second click, you will have two handlers bound on the load event, and both will be triggered.
If you click 5 times on #somebutton, you should end up calling 5 times $('#button').click().
If you want to execute it once, you can follow Fred's suggestion, or use jQuery .one() binder :
$('#iframe').one('load', function(){ $('#button').click() });
Here is the updated jsfiddle : 'loaded' should be displayed only once per click.
Maybe try and replace the lines in both functions like this:
$('#iframe').load(function() {
$('#anotherbutton').click();
};
$('#iframe').attr('src', 'anotherurl');
Otherwise it might be firing the event before the new event-handler has been set.
This isn't really an answer to your problem Now it is an answer, but I think utilizing functions as they were intended could be beneficial here, i.e.:
//Utilize a single function that takes arguments
var openPage = function (frame, src, eventEl) {
frame.attr('src', src); // If you pass frame as a jQuery object, you don't
frame.on("load", function(){ // need to do it again
$(this).off("load");
evEl.click(); //Same for your buttons
});
}
//Simplify other code
$(document).ready(function () {
$('#somebutton').click(function () {
openPage($("#iframe"),somehref,$("#buttonelement"));
});
$('#someotherbutton').click(function () {
openPage($("#iframe"),anotherhref,$("#someotherbuttonelement"));
});
});