I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient
This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});
Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });
Related
i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});
I have create custom toggle script to show/hide content but I am getting issue with script.
When I Click to Filter text content will display and when I click to close button again, it will close and re-open. Why this is happening I don't know please some one guide me.
My JSCode:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
My JSFiddle: Sample
The click is bubbling up, so both event handlers are executed.
You need to stop the propagation
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
e.stopPropagation();
$(".rmm2-toggled ul").hide(1000);
});
FIDDLE
hey the problem is that ur close button is inside ur toggle event
use this js code instead:
$(".rmm2-toggled .rmm2-toggled-title").click(function (e) {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
$(".rmm2-toggled ul").hide(1000);
});
A possible solution would be to try this:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000, function(){
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
});
});
Override
<div class="rmm2-toggled-title" >Click to Filter</div>
with this
<div class="rmm2-toggled-title" id="open_filter">Click to Filter</div>
just add ID named "open_filter" which would be unique and close button is not inside this div.
rather adding event to parent div , add click event to its childs
updated Jquery
$("#open_filter").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});
Here is what I have so far:
Javascript:
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).addClass("active");
});
});
So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.
Does that make sense? How can I do something like this?
Thanks!
You need to first remove the active class from your thumb_wrapper elements. Try this:
$(".thumb_wrapper").click(function() {
$(".thumb_wrapper").removeClass("active");
$(this).addClass("active");
});
Cache your wrapper and call a removeClass() on it first:
var $wrapper = $(".thumb_wrapper");
$wrapper.click(function() {
$wrapper.removeClass("active");
$(this).addClass("active");
});
$(".thumb_wrapper").on('click', function() {
$(".thumb_wrapper").removeClass('active').find(this).addClass("active");
});
This should do it.
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).parent().children().each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
$(document).ready(function(){
$('.what').click(function(){
$('.what').removeClass('active');
$(this).addClass('active');
});
});
I assume something like this?
I have a problem with jQuery selectors:
$("ul.questions li").not(".title, .content").click().live('click', function(){
$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
In that code it works if I remove .not(".title, .content"). but if I add it, it just doesn't gets the click. I use live because usually the elements are added through .append(), except some ones. This is an example: http://jsfiddle.net/88w8N/ . Basically I want to handle click on the li element, but not if it clicks on the .title and .content divs. What I'm doing wrong? Thanks!
You need to stop jQuery from triggering an event attached to the parent when the child is triggered.
You need to use jQuery's event.stopPropagation() function, which
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
In your code specifically: http://jsfiddle.net/88w8N/21/
$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
e.stopPropagation();
});
UPDATE
To fix your "live" issue, try the following modification: http://jsfiddle.net/88w8N/25/
$("ul.questionssel").on('click', 'li', function() {
//$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
$("ul.questionsnosel").on('click', 'li', function() {
//$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
e.stopPropagation();
});
You can use not selector instead of not function
http://api.jquery.com/not-selector/
Try :not("...") instead of .not("...")
please double-check these links:
http://api.jquery.com/attribute-not-equal-selector/
http://api.jquery.com/not-selector/
http://api.jquery.com/category/selectors/