We Keep Coding

jQuery button click only working once

I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.

If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/

The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example

Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});

use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})

The second div won't come back after it's clicked twice

I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'

The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.

You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().

toggle CSS class on click using jQuery does not work

I try to do the following:
When I click on a specific DIV a CSS class is added/removed from another DIV.
Take a look here for a live example (and click on "click me"):
http://jsfiddle.net/fyehLqsc/
$(document).ready(function() {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
It is working as it should, but when I do the same thing on my WordPress site, it's not working.
Take a look here:
link removed
What I want to achieve: If someone clicks on the play button which has the class "mejs-play" the class "animated" shall be added to "spin-l" and "spin-r".
Can anyone please tell me why it's working on JSFiddle but not on my site?

jQuery is running in noconflict-mode in wordpress, you can't access it via $
Use this:
jQuery(document).ready(function($) {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
Edit:
as it seems the Medialelement-library stops the propagation of the click-event.
This works for me:
jQuery(document).ready( function ($) {
$('audio').on('play pause',function(e){
$(this).closest('.current-cast').prevAll('.cassette').last()
.find(".spin-l,.spin-r").toggleClass("animated",e.type==='play');
});
});

Javascript Menu on hover event

I am trying to make a drop down menu work to where when you hover over the menu, it drops down and then on exiting the menu it scrolls back up.
the site I am working on is www.adventuresdev.info/give and the menu is the options titled people, places, projects.
Right now they are set to .click
Here is the .js info
$(document).ready(function ()
{
$('img.menu_class').click(function ()
{
$('ul.the_menu').slideToggle('medium');
});
$('img.menu_class2').click(function ()
{
$('ul.the_menu2').slideToggle('medium');
});
$('img.menu_class3').click(function ()
{
$('ul.the_menu3').slideToggle('medium');
});
$('img.menu_class4').click(function ()
{
$('ul.the_menu4').slideToggle('medium');
});
});

Use jQuery's hover() function.
Syntax: .hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
Change your code for this:
$(document).ready(function ()
{
$('img.menu_class').hover(function(){$('ul.the_menu').slideToggle('medium');},function(){$('ul.the_menu').slideToggle('medium');});
$('img.menu_class2').hover(function(){$('ul.the_menu2').slideToggle('medium');},function(){$('ul.the_menu2').slideToggle('medium');});
$('img.menu_class3').hover(function(){$('ul.the_menu3').slideToggle('medium');},function(){$('ul.the_menu3').slideToggle('medium');});
$('img.menu_class4').hover(function(){$('ul.the_menu4').slideToggle('medium');},function(){$('ul.the_menu4').slideToggle('medium');});
});
Regards

Use the jquery hover() event. See this link for example and how to use it. http://api.jquery.com/hover/

Trigger a jQuery Event Handler Assigned in a Different Code Block

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.

You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});

EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.