I have the following jQuery on the page:
$('#nav-icon1,#nav-icon3').click(function(){
});
And corresponding HTML like this:
<div id="nav-icon3" class="">
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
</div>
There's no nav-icon1 anywhere on the page, but when I change the jQuery to be this:
$('#nav-icon3').click(function(){
});
It stops working.
What am I missing? Thanks!
it's necessary attach that event to your div? check if your spans are position "relative" because if they are "absolute" your div "nav-icon3" may not be visible with height:0px.
another way to add events is using "bind"
$(function(){
$("#nav-icon3").bind('click', function()
{
// some code...
});
});
or
$(function(){
$("#nav-icon3").bind('click', _onNavClick);
});
function _onNavClick(event)
{
// some code...
}
It seems different error, what you are doing is working just how it is. Check it here jsfiddle.net/ed9xsh62/ Check your console or share URL to check the exact error.
$(function(){
$( "#nav-icon3" ).click(function() {
//code goes here
//can do a simple alert to test the function
});
});
Could be a possibility that you just did not have your code in document.ready function (I used the shorthand version). I tried your code and it worked perfectly as long as it was in the document.ready function.
Related
I want to make function working only on page with specified element.
I have search page, search fields and results are in search-block div.
I want to bind function to this block, so function will not work on other pages (without <div id='search-block>...</div>)
I have next js code atm:
$(document).ready(function()
// instructions for another page (handlers for some links)
$(function(){
setInterval(findSomething,1000);
});
});
It working fine on page with search-block div, but it works fine on the other pages too. Browser tries to run this function on all other pages. I don't need this.
I tried jquery bind, but it now worked for me, don't know why :(
$("#search-block").bind(function(){
setInterval(findSomething,1000);
});
How I can bind handler to speciges too.fied block?
Instead of bind you have to check for the length of that elem:
$(document).ready(function(){
if($('#search-block').length > 0){ // <---checks the availability
setInterval(findSomething,1000);
}
});
Bind is always used with an event to bind to:
$( "#foo" ).bind( "mouseenter mouseleave", function() {
});
if you want to execute that only when the block is available on the page, use this:
if ($('#search-block').length) {
setInterval(findSomething,1000);
}
This checks the number of times #search-block is found on the page and if it is not 0(false) it executes the code.
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');
});
});
hi jquery folks I have a jquery datepicker from jqueryui.com/datepicker/. Now i want to add some custom features to it.
The first question, If I enter the source of my page i cannot see the printed jquery code.
Only when I inspect the element(in opera) I can see the printed html. I hope this is not a problem..
When i click on the Next (span)button, i want to do some things. But the problem is I am not able to attach a function to the span class. I tried the following:
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
window.alert("it works");
});
});
this code appears when I inspect the element:
<a class="ui-datepicker-next ui-corner-all ui-state-hover ui-datepicker-next-hover" data-handler="next" data-event="click" title="Next">ev
<span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>
How can this function on click work?
you have the selector wrong
.ui-icon ui-icon-circle-triangle-e
Looks for a element with class ui-icon-circle-triangle-e inside another element with class ui-icon.
When you want to select an element that has more than one class applied to it they need to be seperated by a period .
use
$("body").on('click', ".ui-icon.ui-icon-circle-triangle-e",function(){
window.alert("it works");
});
or just
$("body").on('click', ".ui-icon",function(){
window.alert("it works");
});
You are not calling it properly, it needs to be:
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
alert ('it works');
});
You made a blank instead of a point between your two classes in jquery.
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').off('click').on('click',function(){
alert("Working");
});
});
If you are attaching event directly on the element better to use off and on.
Cheers !!
So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?
The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here
$(document).on('click', '#t1', function() {
froth();
});
I have the following which is supposed to remove the element ".mycontainer" when I click on a close button. It's not removing the element though. When I use firebug. I can see that it is just moving it to outside of the html tags at the beginning on the code.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
$(this).remove();
});
});
It works if I comment out the 3rd line //$(".closeButton").parent().appendTo(".ContentsHolder");
but this removes the content so I can't access it again.
EDIT:
My html looks something like this if it helps to understand what I'm doing...
<div class='ContentsHolder'>
</div>
<div class='mycontainer'>
<div class='myContent'>
<a class='closebutton'>close</a>
... other content ...
</div>
</div>
I have also managed to make it work by putting a delay on the removal of mycontainer $(this).delay(500).remove();
I would not think this is a great solution though.
You could just chain the remove function after the slideUp like so :
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
}).remove();
});
I have solved same problem before like this:
$(".mycontainer").slideUp(500, function() {
$(this).remove();
});
It looks like $(this) is a different context to what you think.
Try adding console.log($(this)); to see the actual context in the console.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
console.log($(this));
$(this).remove();
});
});