I'm working to make a couple buttons to change the theme of a website on click. They work on the main page, but when I tried to move them to the second page, they don't work anymore. The click isn't even being recognized at all.
$(document).ready(function(){
$(document).on("click", "#warm", function() {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
Here is the html that goes with it
<div class="col-md-4 text-center">
<ul id="colors">
<li id="warm">
Warm
</li>
<li id="cool">
Cool
</li>
</ul>
</div>
The cool function is exactly the same as the warm, except it uses removeClass instead of addClass.
$(document).ready(function(){
$(document).on("click", "#warm", function() {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
WOAHHH Back it up partner. First you dont ever want to bind to document, UNLESS you are creating future events. Since you are using the id selector, you should only have 1 of those on the page, which you can rebind if you rebind that particular id to the page. You dont want to blind to the document because it is quite heavy or something. jquery has to parse the entire DOM everytime there is an html change to check if you added another "#warm" (in your example) to see if it needs to create another event binding to that element.
So first off your code should look like this
$(document).ready(function(){
$("#warm").on("click", function(e) {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
now time for some clarification, what do you mean you "move them to the second page"? What code in there says you are moving them ? What is the second page?
Related
I want to click a span using jQuery. (I'm using rails and foundation)
<div class = "row my-row" id="current-my-row">
<div class = "large-12 my-row-heading" id="my-row-click">
<%= image_tag "some_img.png"%>
<span class="title">This is the title</span>
<span class="details"><%= image_tag "other_img.png"%>DETAILS</span>
</div>
<div class = "large-12 my-row-details">
all details
</div>
</div>
I have a jQuery function:
$('.details').on("click", function() {
.... whatever I want it to do...
//my-row-details slides down.
}
On clicking "DETAILS", whatever I want it to do happens.
But, as part of another jQuery function I want to trigger a click on it.
I tried :
$('.details').click();
$('.details').trigger("click");
$('#my-row-click .details').click();
$('#my-row-click').trigger("click");
$('.details').trigger("click");
$('#my-row-click > span:nth-child(3)').click();
$('#my-row-click > span:nth-child(3)').trigger("click");
But I can't seem to trigger a click. i.e. my-row-details does not slide down.
Any help?
UPDATE:
commented all the other code: (assume this is all the function on click does)
$('.details').on("click", function() {
$('.my-row-details').slideDown();
}
Instead of triggering a click, I tried replacing it with this line:
`$('.my-row-details').slideDown();`
This won't work either. But it works if I actually go click "DETAILS"
Both .click() and .trigger("click"); should actually work.
However, triggering an event, defined in your own code, sounds like a bad idea.
There is a better way to do this:
function openDetails() {
// Whatever you want to do
}
$('.details').on("click", openDetails);
"as part of another jquery function":
openDetails();
That way, you can be sure that this behavior is achieved, in a clear and readable way.
Found the problem.
The function that was calling the click() was to be executed on page load. Not on an event. And I had specified $('.my-row-details').hide(); on page load as well. Both of them were contradicting each other.
The solution was to specify display: none for my-row-details in css. And then call .click(); from jquery.
First check whether the click for that span is working or not by keeping an alert inside the click function, if it is not working then try this
$('.details').live('click', function(){
//your logic goes here
});
or your can try this
$(".details").bind("click", function(){
//your logic
});
Hope it works
I am trying to use jquery mouse enter and mouse leave functions .
this is my code :
html :
<ul class="menuList bold">
<li id="tevee">
<span>test</span>
</li>
</ul>
jquery
$(function(){
$(".tevee").on("mouseenter",".menuList",hoverInFunction());
$(".tevee").mouseleave(hoverOutFunction("tevee"));
});
function hoverInFunction()
{
alert("hi")
}
function hoverOutFunction(variable)
{
alert("test");
}
https://jsfiddle.net/tejareddy/dndvsudh/ . this is my fiddle , they are not working instead they are triggering on page load and not every time when i hover on them .
Remove the ()
change
$(function(){
$("#tevee").on("mouseenter",".menuList",hoverInFunction());
});
to:
$(function(){
$("#tevee").on("mouseenter",".menuList",hoverInFunction)
});
or do it like this:
$("#tevee").on("mouseenter",".menuList",function(){
alert("hi")
}).on("mouseleave",".menuList", function(){
alert("test");
});
Firstly, your selector was incorrect for the ".on" call, secondly, you were using parenthesis when referring to a function (which in this case must be referred to as an object without the parenthesis).
$(function(){
$(".menuList").on("mouseenter","li",hoverInFunction);
$(".menuList").on("mouseleave","li",hoverOutFunction);
})
Please see the fixed version here
You may use event.data if you wish to pass parameters into the calls.
The original method of binding the event to the ID is not what .on is all about, it's best to bind to a higher-level object in the DOM (such as the actual menuList) and then write a selector which will affect the children on it. That way you get "delegated eventing" and any dynamically added items will still work the way you want them to.
I am stuck at very normal scnerio. I have HTML code generated by YII CLINK PAGER Pagination widget :
<ul class="yiiPager" id="yw0">
<li class="first hidden"><< First</li>
<li class="previous hidden">< Previous</li>
<li class="page selected">1</li>
<li class="page">2</li>
</ul>
and I want AJAX pagination for my requirement, so that I have wrote Jquery code :
$("ul.yiiPager li.page a").on('click',function (e){
e.preventDefault();
alert($(this).attr('href'));
return false;
loadlistData($(this).attr('href'));
});
But by clicking on any of the <a> tag it is redirecting to the LINK given in href for preventing that i have used e.preventDefault(); but still it is not coming in JQuery code and alert not showing.
Please help. Thanks in advance.
Since your anchor tags are created dynamically. You need to use event delegation. Because the elements should be present on the dom at the time of event binding. In the case of event delegation events are binded to the document or parent element which is presented on the dom
$(document).on('click', "ul.yiiPager li.page a", function(e) {
e.preventDefault();
alert($(this).attr('href'));
loadlistData($(this).attr('href'));
});
Case 1 (direct):
$("ul.yiiPager li.page a").on("click", function() {...});
I want every ul.yiiPager li.page a inside ul.yiiPager li.page to listen up: when you get clicked on, do something.
Case 2 (delegated):
$("ul.yiiPager li.page").on("click", "a", function() {...});
ul.yiiPager li.page When any of your child elements which are "a" get clicked, do something with them.
Summary
In case 1, each of those spans has been individually given instructions. If new spans get created, they won't have heard the instruction and won't respond to clicks. Each a is directly responsible for its own events.
In case 2, only the container has been given the instruction; it is responsible for noticing clicks on behalf of its child elements. The work of catching events has been delegated.
I'm trying to select an element and then add / remove a class. I have achieved this plenty of times with other elements, however for this one it doesn't want to work.
My html is as follows:
<div>
<a class="login-headerText" id="hypLogin" style="padding-right:5px; float:left" >Login</a>
<h4 class="login-headerText" style="font-weight:bold; padding-right:5px; float:left">/</h4>
<a class="login-headerText" id="hypCreateAccount">Create Account</a>
</div>
The div is wrapped inside another div. (id=modal)
I want to select "hypLogin" then add a class to it on click. It works if i do this in the onClick event, however it wont work in a seperate script. (The script is referenced and works as it is used for other elements)
This is my jQuery
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
Tried debugging it and it's not getting hit at all.
Probably something really simple.
Couple of things:
you must do it on:
$( document ).ready(function() {
});
Does these elements printed dynamically?
try to use:
$('#hypLogin').on('click', function () {
});
try to put your code on modal open event.
Here is working fiddle
try this:
$(document).ready(function () {
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
});
Morning,
I must be asking google all the wrong questions, because I can't find anything similar.
I have a standard navigation list, but I'm using page jumping because I wanted a single web page.
<ul>
<li>Livestream</li>
<li>Media</li>
<li>Crew</li>
<li>Services</li>
<li>Contact</li>
</ul>
But I can't for the life of me figure out how to make the class="current" when using page jumping. I've tried this bit of jquery because it appears to be what I'm looking for, but it did nothing. I don't think it'll work for #links.
Any ideas?
If you want to add the current-class to the a that has been clicked, you can accomplish it like this:
// Wait for the DOM to be ready
$(function(){
// Add click-event listener
$("li a").click(function(){
// Remove the current class from all a tags
$("li a").removeClass("current");
// Add the current class to the clicked a
$(this).addClass("current");
});
});
What do you want to put the class=current on?
Logic to apply it to A on click and remove form all other links:
$('a').click(function(){
//remove from other links, they're no longer current
$('a').removeClass('current');
//this is now the current active link.
$(this).addClass('current');
});
This is what you were asking, I believe. Let me know if you have any issues.
As we are talking about anchors, you should do a .preventDefault() to make sure the anchor default action is not fired.
jsBin demo
$('ul#nav li:eq(0) a').addClass('current');
$('ul li a').on('click',function(e){ // assign 'e' event
e.preventDefault(); // prevent default anchor action
$('.current').toggleClass();
$(this).addClass('current');
var goToPage = $(this).attr('href'); // get the link href
var pagePos = $(goToPage).position().top;
$('body').stop().animate({scrollTop: pagePos}, 2000);
});