The first click does not work but every click after does perfectly. Is there anything I'm doing wrong or is it the site? (I'm using JS Fiddle by the way)
$("a").click(function () {
var x = document.getElementsByTagName("a");
$(x).click(function () {
var y = this.parentElement.parentElement;
$(y).hide("slide", {
direction: "right"
}, 1000);
});
});
In your code the first click will register another click handler which is actually doing the work so when the first click happens there is no handler which is actually hiding the parent element.
Also here you are attaching a new click handler in each click of the anchor element.
Instead you can just add the hide logic in the first click handler itself like
$("a").click(function () {
$(this).parent().parent().hide("slide", {
direction: "right"
}, 1000);
});
Demo: Fiddle
On your first click, you are executing a function that adds another click listener, so it won't be executed until it is clicked again. Try something like this:
function yourFunction() {
var y = this.parentElement.parentElement; // this may have to be slightly modified - I'm not sure of the rest of your code
$(y).hide("slide", {
direction: "right"
}, 1000);
}
$("a").click(function () {
var x = document.getElementsByTagName("a");
$(x).click(yourFunction);
yourFunction(); // calling yourFunction here also ensures it's called on the first click
});
Edit: this is redundant. Arun P Johny has a much cleaner solution. This is what I get for staying up all night.
Related
I have a magento test-shop with onepagecheckout extension. This uses a onepagecheckout.js. There should be added 'click'-event observers to the payment radio buttons. But when clicking on them, nothing happens.
The observers are added to the single input elements while each-ing through them:
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('click', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
The eached elements are, as can be seen in the Chrome debugger and fit to the input-element ids and names:
el = input#p_method_bankpayment.radio
el = input#p_method_paypal_express.radio
el = input#p_method_cashondelivery.radio
el = input#p_method_phoenix_cashondelivery.radio
The update function is calling new content via AJAX when page is loaded, but is not executed and no network-activity can be seen, when events should be fired.
The installation can be seen here: http://5.175.9.22/gp_de/onepagecheckout/
(Put something in the cart/Warenkorb, go to checkout/Zur Kasse, not further)
Can somebody tell me why the observers are not working? Other installations are working with this extensions, what's
Your input elements are hidden by
style="display:none;"
so nobody can click them. If you remove display:none in dev-tools and then click the radio button, an alert 'Click' pops up.
Try to use a change event instead of click
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
Update:
I've taken a closer look to this. This could not work with a change event, because there are onclick Attributes on each radiobutton. These are not triggered 'onchange'. So try to trigger the (example):
onclick="payment.switchMethod('phoenix_cashondelivery')"
event with something like this
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
$(this).simulate('click');
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
I am trying to get an onblur/onfocus combination working for a pair of text boxes which I am selecting via class in jquery. I am not getting any errors in debug, but the blur function never seems to be called. When debugging my breakpoint in the blur function is not hit.
$(document).ready(function () {
var row = $(this).closest('tr');
$('.editClass').click(function () {
var editBoxes = $(row).find('.editClass');
var focus = 0;
$(editBoxes).focus(function () { focus++ });
$(editBoxes).blur(function () {
focus--;
setTimeout(function () {
if (!focus) {
alert('LOST FOCUS'); // both lost focus
}
}, 50);
});
});
});
Pretty sure the problem here was that the editBoxes were dynamically added to the page. This was not apparent in my question. Since they were dyncamically added I need to use
$(document).on('blur', '.editBoxes', function (){
...
}
The last two lines of your code example should be this
});
});
This is needed for closing the ready and click function call.
Another possible problem is that you wrap the focus and blur listeners in a click handlers. Why did you do this?
I thought that if I put one click function into click function it was only proceeding the second click function if it was clicked, but when I click the first the codes for second one is running... I thought that if i clicked the second one it should have run the codes.
I mean when I clicked the second one then the codes are visible and doing as they should do, but If click like first function 3 times without to click the second and suddenly click on the second, it is behaving like the codes have run three times.
$(".click1").click(function () {
alert("hej");
$(".click2").
function ({
alert("bye");
});
});
My intention is to only make the second click to run when it is really clicked and not run the codes if I click the first one!
To be more clear. When I click first, it says hej and if I click three time then it will say hej 3x but when I suddenly click click2 it showing bye three times but I only clicked once.
Can anyone explain me why this is happening? and How i can prevent this to happen?
Thanks for the help!
EDIT!!
function click_back() {
current_question_for_answer.splice(0,1);
$("#tillbaka_question").fadeTo("slow", 0.2);
$("#tillbaka_question").off("click");
$(".questions").hide();
$(".containing_boxes").show();
$(".answered_box").remove();
var numbers_of_answered_question = history.length - 1;
for (var i = numbers_of_answered_question; i > -1; i--) {
current_question.push(i);
$(".containing_boxes").prepend('<div class="answered_box">'+i+'</div>');
$("div.containing_boxes > div:nth-child("+history.length+")").css("background-color", "green");
$(".containing_boxes").hide();
$(".containing_boxes").fadeIn(100);
}
$("div.containing_boxes > div").not(":last-child").click(answered_box);
$("div.containing_boxes > div:nth-child("+history.length+")").click(function () {
$("div.containing_boxes > div:nth-child("+history.length+")").click(function () { }) this function should only work if I click it. I can not seperate this code in two new function. If I do it, then the whole system will stop working.....
Because you clicked on click1 3 times, the click event on click2 is 3x created. Thats why it will alert 'bye' 3 times.
You should Unbind click event before binding New click event
$(".click1").click(function () {
alert("hej");
$(".click2").unbind('click');
$(".click2").bind('click',function (){
alert("bye");
});
});
Live Demo
The first click is attaching another click handler which means the second click will fire multiple times, so every time you click it you will get a lot of "bye"s. To avoid this, you can simply set a variable like var isClicked = 0 on load, and then before attaching the handler to click2, check if isClicked == 0, if true then set isClicked = 1 so it only works once
var isClicked = 0;
$(".click1").click(function () {
alert("hej");
if ( isClicked == 0 ) {
isClicked = 1;
$(".click2").
function ({
alert("bye");
});
}
});
I think, his is what you are after:
$(".click1").click(function () { alert("hej"); });
$(".click2").click(function () { alert("bye"); });
Try this:
var click1 = false;
$(".click1").click(function () {
alert("hej");
click1 = true;
});
$(".click2").click(function() {
if (click1 === true) {
alert("bye");
click1 = false;
}
});
Every time you click 1st button, You are registering click event for the 2nd button, so if you click 1st button 5x then 2nd button click event will be registered 5x
The solution is that
You make sure that every time you click 1st button you unregister click event for 2nd button, then register it again
I have a tooltip(which is just a div) that appears when on the mouseover event of another element.
I am trying to make the tooltip hidden on the mouseleave event of the the main element, however, I want the tooltip to remain visible if the mouse is over the tooltip.
The tooltip is being position directly underneath its element.
My code is as follows:
var option_hide_timeout;
$(".option").mouseover(function () {
showTooltip($(this));
});
$(".option").mouseleave(function () {
option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});
$("#option_tt").mouseenter(function () {
clearTimeout(option_hide_timeout);
});
$("#option_tt").mouseleave(function () {
hideTooltip();
});
function showTooltip(parent) {
var parentPos = parent.position();
$("#option_tt").css({
visibility: "visible",
left: parentPos.left,
top: parentPos.top + $(parent).height()
});
}
function hideTooltip() {
$("#option_tt").css("visibility", "hidden");
}
The problem is that the tooltip hides immediately after the mouse leaves the main element.
The problem is persistent across Chrome, Firefox, Opera and IE.
No matter what the value of the delay(2000 in my code is just an example, it would more likely be shorter in practise), it triggers immediately.
I have tried using both mouseover/mouseout and mouseenter/mouseleave - both produce the same results, which leaves me with the conclusion that the line:
setTimeout(hideTooltip(), 2000);
is not correct.
Placing an alert in the mouseleave event assures me that the code is being called.
Am I missing something obvious? If so, a pointer in the correct direction would be greatly appreciated.
Change
option_hide_timeout = setTimeout(hideTooltip(), 2000);
to
option_hide_timeout = setTimeout(hideTooltip, 2000);
The added parenthesis makes the function being immediately called instead of being given to setTimeout.
I seem to have fixed my own issue.
$(".option").mouseleave(function () {
option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});
should be:
$(".option").mouseleave(function () {
option_hide_timeout = setTimeout(function () { hideTooltip() }, 2000);
});
It was very simple and I should have realised this before posting.
I have a <ul> that when clicked, toggles the visibility of another <ul>. How can I attach an event to the body of the page when the <ul>s are revealed so that the body will hide the <ul>.
I am new to writing these sorts things which bubble, and I cannot figure out why what I have done so far seems to work intermittently. When clicked several times, it fails to add the class open when the secondary <ul> is opened.
And of course, there may be an entirely better way to do this.
$(document).on('click', '.dd_deploy', function (e) {
var ul = $(this).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
//attach click event to the body to hide the ul when
//body is clickd
$(document).on('click.ddClick', ('*'), function (e) {
e.stopPropagation();
//if (ul.hasClass('open')) {
ul.hide();
ul.removeClass('open')
$(document).off('click.ddClick');
// }
});
});
});
http://jsfiddle.net/JYVwR/
I'd suggest not binding a click event in a click event, even if you are unbinding it. Instead, i would do it this way:
http://jsfiddle.net/JYVwR/2/
$(document).on('click', function (e) {
if ( $(e.target).is(".dd_deploy") ) {
var ul = $(e.target).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
});
}
else {
$('.dd_deploy').children('ul:visible').fadeOut(50,function(){
$(this).removeClass("open");
})
}
});
If you need to further prevent clicking on the opened menu from closing the menu, add an else if that tests for children of that menu.
You dont' really need all that code. All you need is jquery's toggle class to accomplish what you want. simple code like one below should work.
Example Code
$(document).ready(function() {
$('ul.dd_deploy').click(function(){
$('ul.dd').toggle();
});
});
Firstly, you are defining a document.on function within a document.on function which is fundamentally wrong, you just need to check it once and execute the function once the document is ready.
Secondly why do you want to bind an event to body.click ? it's not really a good idea.
Suggestion
I think you should also look at the hover function which might be useful to you in this case.
Working Fiddles
JSfiddle with click function
JSfiddle with hover function