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

is there a way to add multiple events to the $("body").on() to work when a list is changed or a button is clicked

I have the following script :-
$(document).ready(function () {
$("body").on('change', '#FilterSize1,#FilterSize2', function () {
where the related function will fire when the filterSize1 or FilerSize2 is changed. now I want to modify the above to allow the same function to fire when an button is clicked also ? so can anyone advice if $("body").on allow to define multiple events (when a list is changed or when a button is clicked ??) ?

Just name the function.
Although you can have .on("change click",function() - it looks strange when you have things that change and things that you click. For example if you click a select the function will be executed regardless of change. It does make it more readable too.
function something() {}
$(document).ready(function () {
$("body").on('change', '#FilterSize1,#FilterSize2', something);
$("body").on('click', '#button,#button1', something);
});
on neater:
$(document).ready(function () {
$("body").on('change', '#FilterSize1,#FilterSize2', something)
.on('click', '#button,#button1', something);
});

Use multiple events with space separated
$("body").on('change click', .......
In case you want different handlers for them then
$("body").on({'click': function(){ .... }, 'change' : function(){..........},'selector')
For binding events for separate elements, you should bind twice with different selectors
$("body").on('click','selector1',handler).on('change','selector2',handler)

Detecting if bootstrap modal window is show don't work properly

I have to draw something in bootstrap modal window if user click on button. My code is:
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
$('#myModal').on('shown.bs.modal', function (e) {
alert('Debug');
drawStuffInModal();
});
});
For first click everything works fine. But for second click i get two alerts, for third click - three alerts etc.
User can click button only if modal is hidden, so he need to close modal before next drawing.
I found out that a problem is a detecting of modal window state - if I don't use $('#myModal').on('shown.bs.modal', function (e) {}) but just waiting:
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
setTimeout(function () {
alert('Debug');
drawStuffInModal();
}, 500);
});
... I always get alert once. It works, but it's very ugly solution.
So my question is: why first code not working properly? I don't want wait n miliseconds because in some cases modal can need more time for loading and then user got errors.

Don't bind new event in another click event handler. Click on the #button can happen many times, which means that it will bind many similar duplicated events. Just move shown.bs.modal event subscription outside:
$('#myModal').on('shown.bs.modal', function (e) {
alert('Debug');
drawStuffInModal();
});
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
});

Bootstrap 3 modal doesnt always activate ajax code

I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.

you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

On zurb foundation's website at http://foundation.zurb.com/docs/reveal.php they listed some Options including
open: callback function that triggers 'before' the modal opens.
opened: callback function that triggers 'after' the modal is opened.
close: callback function that triggers 'before' the modal prepares to close.
closed: callback function that triggers 'after' the modal is closed.
But I have no idea how to use them with my modal.
I tried:
$('#myModal').closed(function()
{});
$('#myModal').trigger('reveal:closed')(
{});
$('#myModal').reveal.closed(function()
{});
$('#myModal').reveal().closed(function()
{});
I have Googled but found no hits. Anyone who can explain it or give me an example or provide a related link?
The suggestion given works, however
I have yet another closely related question for reveal():
Click Me For A Modal);
I tried to add one attribute like data-closeOnBackgroundClick="false" That doesn't seem to work. What should be the correct syntax? Will it work for callback function as well?

The above answer did not work for me. Here's what worked (Foundation 4 and jQuery):
$('#myModal').bind('opened', function() {
console.log("myModal opened");
});

Event Bindings for Zurb Foundation Reveal -
There are a series of events that you can bind to for triggering callbacks:
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
If you have multiple data-reveal used in single page as follows :
<div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>
Then in this situations you can trigger callback same as explained above but with little modification as shown below :
$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
// your code goes here...
});
$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
// your code goes here...
});

Call reveal like you normally would, but include the name of the option and corresponding function as an object:
//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });

On Zurb Foundation v6, these events were renamed to xxx.zf.reveal:
closeme.zf.reveal Fires immediately before the modal opens. Closes any other modals that are currently open
open.zf.reveal Fires when the modal has successfully opened.
closed.zf.reveal Fires when the modal is done closing.
Source: http://foundation.zurb.com/sites/docs/reveal.html#js-events
Examples:
Generic callback that will fire for all modals:
$(document).on('open.zf.reveal', '[data-reveal]', function() {
console.log('This works');
});
Callback that will fire when a specific modal is opened:
$(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
console.log('This works');
});

Like meatrobot said, to get this working you want to bind to the modal with the action you are targetting. I got this to work:
$('#myModal').bind('closed', function() {
console.log("myModal closed!");
});

This is a little late but for the second part you add the attributes as a semi-colon separated list of values in the data-options attribute (tested with foundation 5), i.e:
<div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">
And no, you cannot pass functions this way, i tried :)

Looking at Foundation 5 and found that the reveal library triggers open, opened, close, and closed events. Just attach a handler to the event you want.
$('#myModal').on([event], handler)
You can also pass the handlers via the settings argument.
Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

The foundation 5 documentation specifies scoping of reveal events to the 'reveal' eventspace. However, the actual modal events do not seem to fire consistently within this eventspace. Removing this specification fixes the issue:
$(document).on('opened.fndtn', '[data-reveal]', function() {
console.log('This works');
});

In foundation 3.2.5 you should bind 'reveal:opened' like this:
$('#myModal').bind('reveal:opened', function() {
console.log("myModal opened");
});
Regards, MarianoC.