Develop Reference

jQuery Toggle not working with multiple elements

I want to make a toggle functionality using very simple code of jQuery
On load of page temperature will be displayed in Celsius and If I clicked on that temperature text another variable holding temperate in Fahrenheit will appear.
Can anybody please help me, what mistake I am doing.
If I uncomment the alert function my code is working fine.
<style>#fahrenn {display:none;}</style>
document.getElementById('temprature').innerHTML='<b>Temprature: </b><span id="celcioussss">'+minTemprtr+'℃ </span><span id="fahrenn">'+tempFar+'℉</span>';
<script>
$(document).ready(function(){
//alert();
$("#celcioussss").click(function(){
$(this).css("display","none");
$("#fahrenn").toggle();
});
$("#fahrenn").click(function(){
$(this).css("display","none");
$("#celcioussss").toggle();
});
});
</script>

It seems that you're appending HTML dynamically from JS.
If your HTML is dynamically appended in body using JS, then you need to bind the event to the particular element to make it working.
$(document).on('click', '#celcioussss', function(){
$(this).css("display","none");
$("#fahrenn").toggle();
});
$(document).on('click', "#fahrenn", function(){
$(this).css("display","none");
$("#celcioussss").toggle();
});
More information .on()

Containers with same class to have separate jquery effect

Okay so I made a quick program that shows the hidden text when you click on a box. The problem is, when you click on either box, it shows the text in both of them. I only want it to show the text from the box you clicked in.
Javascript:
$(document).ready(function(){
$('.insidebox').hide ();
$('.box').on('click', function(){
$('.insidebox').fadeToggle();
});
});

You need to specifically access the current element, for instance, via this.
$( this ).find( '.insidebox' ).fadeToggle();
Without that, jQuery will just query for any .insidebox element within the entire DOM.

$(".box").on("click", function(){
$(this).children(".insidebox").fadeToggle();
});

Use the implicit object:
$(document).ready(function(){
$('.box').on('click', function(){
$(this).fadeToggle();
});
})

You can do that:
$(document).ready(function(){
$('.insidebox').hide ();
$('.box').on('click', function(){
$(this).fadeToggle();
});
});

applying script to elements inserted via jquery .html()

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot

Take a look at live()
$('#touchMe').live('click', function() {

Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});

Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});

you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.

prepend a div and hide it with this object

<div id="newsSubmit"><b>Add random snippet</b></div>
<script>
$("#newsSubmit").click(function(){
$("body").append("<div class='lol'>Ok, DELETE this snippet (click here)</div>");
});
$(".lol").click(function(){
$(this).fadeOut();
});
</script>
http://jsfiddle.net/apzdt/6/
How can I fix it? It's not working

http://jsfiddle.net/apzdt/7/
change mootools to jquery and .click() to .live('click')

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.

Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here

.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.

You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers

Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});