We Keep Coding

How to restart the Jquery events, to avoid the repetition of each one of them?

I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?

Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});

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

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks

http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.

Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/

Why does my "plugin" execute only once?

This is my first attempt to write a jQuery plugin, this one is supposed to fade out the body, switch class, then make the body reappear and let the user switch class back. Unfortunately at this point it can't switch class more than once. How to fix it?
(function($) {
$.fn.flashClass= function(classId, element){
element="body"; //overriden for testing purpose
$(this).click(function() {
$(element).fadeOut("slow", function() {
$(element).toggleClass(classId);
});
$(element).fadeIn("slow", function() {
$(element).scrollTop(height);
});
});
};
})(jQuery);
EDIT:
At the end of the day, It turned out that I've pasted the wrong snippet with scrollTop callback of undefined variable height. After removing it and switching .click to .on , function works like a charm. However I am still interested why it worked only once.

Try the live() or on(), like following :
$(this).on('click',function() {...
Instead of
$(this).click(function() {...

Page refreshes during JQuery call

For some reason when this JQuery call is made the page refreshes. I was lead to believe that a return false; at the end of a JQuery function would cause the page not to reload, but apparently this is not the case? Here is my stripped down code:
$(function() {
$(".vote").click(function() {
return false;
});
});
When I click on the vote button the page is refreshed. I know that this code is being called because if I replace return false with alert('asdf'); the alert appears.

Often when you want to prevent a link from being followed or a form from submitting, you want to tell the event to preventDefault():
$('a').click(function(e){
e.preventDefault();
});

Try this:
$(function() {
$(".vote").click(function(e) {
e.preventDefault();
});
});

You can't put a div in an a: div is block-level element, a is inline, and HTML does not allow block elements inside inline elements. Browsers will try to automatically correct this by rearranging your DOM tree somehow (for example, <a><div></div></a> might end up as <a></a><div><a></a></div><a></a>); which leads to all sort of funny behavior. In Firefox you can use 'view selection source' (or, of course, Firebug) to check what happened.