We Keep Coding

jQuery selector for element not on page

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.

jquery add and remove class not working

I have one problem about add and remove class in my javascript code.
I have created this DEMO from codepen.io
So you can see in demo there is a Click here link. When you click the link then jquery doing
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
$('.vduzalani').animate({'opacity':'.50'}, 300, 'linear');
$('.vduzalani').css('display', 'block');
$(this).next('.yazi-paylas').toggleClass('in');
})
});
Then problem is i want to add a .in from .yazi-paylas div tag. What is the problem in my javascript code

That is because .buton is the only child node of its parent and .next() will return nothing, as seen in your markup:
<div class="container">
<div class="buton">Click Here</div>
<!-- .buton is the ony sibling! -->
</div>
<div class="yazi-paylas">ssss</div>
<div class="vduzalani"></div>
You can use .parent('.container') (or just .parent()) or .closest('.container') to go one level up, and select the immediate sibling of .container:
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
// You can use chaining, so you don't have to fetch $('.vduzalani') twice
$('.vduzalani')
.animate({'opacity':'.50'}, 300, 'linear')
.css('display', 'block');
// Tranverse DOM
$(this).parent().next('.yazi-paylas').toggleClass('in');
// or
// $(this).closest('.container').next('.yazi-paylas').toggleClass('in');
});
});
See demo fiddle here: http://jsfiddle.net/teddyrised/0g9385k1/

Please try:
$('.yazi-paylas').toggleClass('in');
instead of
$(this).next('.yazi-paylas').toggleClass('in');

Evaluate the parent to get the .yazi-paylas element. Change your code to:
$(this).parent().next('.yazi-paylas').toggleClass('in');
Or, if it doesnt matter the parent, just do:
$('.yazi-paylas').toggleClass('in');

Try to replace your line with this:
$(this).parent().next('.yazi-paylas').toggleClass('in');
$(this) in this case is actually one level deeper than the element you are trying to select.

Using jquery to make a div clickable and to run a function

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();
});

JQuery Remove all content inside a specified Div (Facebook Tag)

I am using this:
$('#myLink').click(function () {
$('#MainDIV').empty();
});
Where:
<div id="MainDIV">
<fb:like href="somelinketc">....</fb:like>
</div>
I need everything inside <div id="MainDIV"> to disappear but I'm checking firefox and it's all still there.

Try it in this way.
$(document).ready(function(){
$('#myLink').click(function(){
document.getElementById('MainDIV').innerHTML="";
});
});
I think this is an easy way to overwrite the existing data in the element in which you want to make it disappear or change the contents according to your requirements.

There's an error in your .click() function. It should end with the parenthesis like this:
});
and not like this:
)};
Should fix it.

You should be preventing the click action of the link with preventDefault()
$('#myLink').click(function (e) {
e.preventDefault();
$('#MainDIV').empty();
});
Also I am not sure but your post above has a typo. )} should be }).

$("#MainDIV").html('');
That'll clear all the contents of the div.

$('#myLink').click(function () {
$('#MainDIV').hide(1);
)};

jquery, div with table is not visible when I call show();

<div id="abclink">
+ click here to view
</div>
<div id="abctable" style="display: none;">
some text here, allot of text
</div>
So using jquery I try and do:
$("#abclink").bind("click", function() {
$("#abctable").show();
});
This doesn't work, and I don't know why?

you have to put a #
$("#abclink").bind("click", function() {
$("#abctable").show();
});

You might be missing the document.ready function. Also, it might be best to use toggle instead of show:
$(document).ready(function(){
$("#abclink").bind("click", function() {
$("#abctable").toggle();
});
})

I'm guessing #abclink doesn't exist at the point you're trying to bind the event. Are you doing it in the of the page? If so, try putting it in the document.ready event:
$(function() {
[your code]
});