Develop Reference

jquery event handler only running once

I am having problems with jqueries "click" event handler, its working only once, and then it stops, please I need help fixing it.
What I did is, I use an image as a button, for my Web app but, through jquery, but it only runs once.
Here is the code:
$( document ).ready(function refresh() {
$(".menu_button").click(() => {
$("nav").addClass("open-menu");
});
});
$( document ).ready(function() {
$(".cancel_menu").click(() => {
$("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
});
});
Please tell me if you need more info, Thanks.

The problem I don't think is with the jquery. Your cancel menu moves the menu all the way to the right, but you never bring it back.
I reset the transform to none on the click of the menu button and it works.
Below is the relevant line in the menu_button click event handler
$("nav").addClass("open-menu").css("transform", "none");
$( document ).ready(function refresh() {
$(".menu_button").click(() => {
$("nav").addClass("open-menu").css("transform", "none");
});
});
$( document ).ready(function() {
$(".cancel_menu").click(() => {
$("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
});
});
.open-menu{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu_button">OPEN</button>
<button class="cancel_menu">CANCEL</button>
<nav>NAV</nav>

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?

You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>

You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.

Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Make toggle open only the actively clicked button, not all toggles

Right now I've got a toggle that when you click it opens every toggle that is named 'content'. How can I make it so that the toggles are opened individually?
Fiddle: http://jsfiddle.net/4N6xj/embedded/result/
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$content.slideToggle(200);
});
});

Target the next() .content element from the clicked .toggle
$(document).ready(function(){
$(".content").hide();
$(".toggle").on("click", function(e){
$(this).next('.content').slideToggle(200);
});
});
FIDDLE

Jquery Click Event Is Larger Than Button

I'm having some issues with the Jquery click event. The event is firing when I click the button but it also will fire when I click to the side of the button which produces an undesirable affect in the application I'm building. I've included a JSFiddle below which demonstrates this issue. If you click to the right of the 'Next' button the event will still fire. Also if you take out the javascript this behavior disappears.
JSFiddle
Javascript shown below:
$(function() {
$(" #sortable ").sortable({axis: "x", containment: "window"});
$( ".clicked" ).click( function() {
var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
alert(sortedIDs);
var target = "http://localhost:3000/langs";
$.ajax({
type: 'get',
url: target + '?order='+sortedIDs.join(',') ,
dataType: 'script'
});
});
});
Any ideas on how to resolve this issue and contain the click event within the button?
Thanks for the help in advance!

That's because your click handler is set on the div that contains the button. If you want it only for the button element, give it an id and set it on that instead.
<div class="clicked"><button id="next" type="button">Next</button></div>
$('#next').click(function(){..});

It's because the div has display:block by default (which has width 100% of parent), you can just set it to inline-block:
.clicked {
display:inline-block;
}
Demo

change this
<div class="clicked"><button type="button">Next</button></div>
into this
<div><button type="button" class="clicked">Next</button></div>
and try

why not change to this:
$( ".clicked button" ).click( function() {

JQuery reversing SlideToggle in Wordpress

I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk

Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});

Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle