I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.
Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)
actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks
Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});
Related
I have this strange scenario that I cannot understand.
Basically, I show an element using jquery show(); which works fine.
But I need to hide() the same element using the hide(); function but the element stays visible and the hide() doesn't work.
Can someone please advice on this?
Here is a working FIDDLE.
This is my code:
$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});
$(document).on('click','.pSelection', function(e){
$('.buildExDrop').hide();
});
#billyonecan was spot on, adding e.stopPropagation(); after your $('.buildExDrop').hide(); fixes this.
This allows the hide click event for the sub-elements .pSelection to not bubble up to the show click event of the .buildExDrop element.
Your click to hide also triggers the click to show. this works
$(function(){
$(document).on('click','.buildExMain span', function(e){
$('.buildExDrop').show();
});
$(".buildExMain").on('click','.pSelection', function(){
$('.buildExDrop').hide();
});
});
I recently asked a question about the inability to click a table row and popup an alert when on any page but the first using List.js pagination.
This was solved by adjusting my click event to:
$('#test-list').on('click', 'tr', function() {
alert("These work, but the rest don't :(")
})
Now I seem to be having the same trouble with buttons, but am not sure how to fix the click event.
This is the click event as it sits:
$(".test-button").on("click", function ()
{ alert("These work, but the rest don't :(");
});
Here's a codepen so you can check out the issue:
http://codepen.io/cavanflynn/pen/gpdgvj
It's probably also a simple fix, but I cannot come up with the solution.
Thanks for your help!
for the buttons use a static reference to bind the event and then pass the button class like this:
$("#test-list tbody").on("click", ".test-button",function () {
alert("These work, but the rest don't :( ..... but now seems working :) ");
});
working pen http://codepen.io/anon/pen/XbPpPK
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.
This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone
When anyone clicks on the listen button its background changes into the stop listening and vice versa. This is the functionality I wanted and I got it using jQuery.
What I also want now is the text to change too accordingly. Like, when someone clicks on the "listen" anchor, its text should change to "stop listening", and the same for the stop listening anchor. Like a toggle anchor.
Thanks for the help ! Really appreciate it... :)
$("#first").toggle(function(){
$(this).text("Stop listening");
}, function(){
$(this).text("Listen");
});
Online demo: http://jsfiddle.net/5AUdJ/
UDPATE
I see you are using a class to control the listen/stop state. Maybe this will work better.
$("a").click(function(){
if($(this).is(".listen")){
$(this).text("Stop listening").removeClass("listen");
} else {
$(this).text("Listen").addClass("listen");
}
});
Here, I made this JSFiddle using your source code.
http://jsfiddle.net/K4Njj/2/
Here is the jQuery code:
$(function(){
$("#container a").click(function(){
if ($(this).html() == "Stop Listening")
{
$(this).html("Listen");
}
else if ($(this).html() == "Listen")
{
$(this).html("Stop Listening");
}
});
});
That will simply check to see if the text on the anchor is "Stop Listening" or "Listen" and if it is, it will switch it when you hit the button. It's really the most elegant solution.
In your Javascript, you can use the innerHTML property to access and/or change the HTML text of an element.
getElementById("first").innerHTML = "newtext"
I have the following jQuery:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle();
$("#account-link").toggleClass("selected");
});
What I want to do is check if the user clicks anywhere else onscreen WHILST THE ACCOUNT MENU IS SHOWN BUT not within the account menu itself, and if so then hide the menu. Can anyone help?
Thanks
EDIT:
I had a go at doing this myself like so:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle('fast');
$("#account-link").toggleClass("selected");
});
$(document).mouseup(function(e) {
var $targ = $(e.target);
// if we are the link or the box, exit early
if ($targ.is('#account-link') || $targ.is('#account-menu')) return;
// if we have a parent who is either, also exit early
if ($targ.closest('#account-link, #account-menu').length) return;
// hide the box, unselect the link
$("#account-link").removeClass("selected");
$("#account-menu").hide('fast');
});
But wanted to see if there was a nicer and much smaller (code-wise) way of doing it.
Use jQuery to hide a DIV when the user clicks outside of it
Maybe something like this...
$('#account-menu').hide();
$('body').click(function(){
$("#account-menu:visible').toggle();
$("#account-link").removeClass("selected");
});
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu:not:visible").toggle();
$("#account-link").addClass("selected");
});
UPDATE
So this won't fully work, since the body click triggers when you click the link too. This is a step in the right direction though. G/L
UPDATE #2
I finally got this working over on JSFiddle.net, using the comments from Joseph Le Brech (+1). Check out the live Demo. I could not get the $('body') selector working on there, so I am simulating the body with a div called bodyDiv. It's all commented and working 100%. Happy Coding.