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

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().

Dynamically created div behavior on button click

I went through many post from SO but not able to relate with my scenario.
I have this code on button click. by which User can create as many div on runtime as he wants to on UI.
$('#adddiv').click(function () {
debugger;
$('#main').append('<div class="ara-dynamic-div">
<div class="box box-solid bg-light-blue-gradient">
</Div></div>');
});
code to get buttonclick event from that div
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
function showMakeAndHold(obj) {
alert(obj);
$('.ara-dynamic-div').fadeOut();
}
Now the problem is that I have to create multiple dynamic div. and each div will have button to close itself. When I call this function it will close all created div's instead of the one which button is clicked.
I am not able to find the proper div by which request for close come. I am new to DOM and JQuery. not able to relate the things

First of all, if you're using multiple divs you shouldn't give the close button an ID, but a class instead (let's say, .close)
Next you can use event delegation to find the correct element:
$(document).on('click', '.ara-dynamic-div .close', function( event ) {
$(this).closest('.ara-dynamic-div').fadeOut();
} )
The delegator handles all click events in any .ara-dynamic-div .close button, catching them all and allowing you to use $(this).closest(...) to get to the parent container.
Edit: Corrected a mistake

You can use jQuery's .closest() function.
function showMakeAndHold(obj) {
alert(obj);
$(obj).closest('.ara-dynamic-div').fadeOut();
}
JSFiddle

Replace this:
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
by this:
$(document).on('click', '#remove', function () {
$(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
$(this).remove();
});
});
Here is the JSFiddle demo
What the code does is that it remove all other .ara-dynamic-div except the one for which the button was clicked.

Jquery onclick close button, hide entire span including close button

I have a css image that has a close button attached to it. I'd like to click the close button, and have the entire span fade out with jquery. This is basically my html:
<span class="topic_new_button">
</span>
And I tried:
$(".closebutton").on("click", function(event) {
var $row = $(this);
$row.animate({ opacity: 0.05}, function() {
$row.find(".imglink").fadeIn();
});
});
But that doesn't work, can someone point out the error of my ways?

To fadeout the entire span, call fadeOut() on the clicked element's parent
$(".closebutton").on("click", function (event) {
$(this).parent().fadeOut();
event.preventDefault();
});

first thing you used fadeIn which used for showing instead use fadeOut or hide
if you are not using anymore <span class="topic_new_button"> then below will workout
$(".closebutton").on("click", function (event) {
$("#topic_new_button").fadeOut();
});
OR
$(".closebutton").on("click", function (event) {
$("#topic_new_button").hide();
});

If this and the above example do not work, your jQuery may be out of date.
$(document).ready(function() {
$('.closebutton').click(function() {
$('span').fadeOut();
});
});
Also, there is a mistake in your HTML code (extra quote mark), and when you have link with no reference, it returns an error, use something else as a button.
Here is a JSFiddle example using a <button> tag instead.

jQuery toggle a button value using .prop()

i am trying to make the value of a button change when hovering, but then change back on mouse off.
To change the value this does work:
$(".followbuttony").hover(function () {
$(".followbuttony").toggle('value', 'Unfollow');
});
But of course it stays that value. The problem is that the button value is dynamically loaded in the first place so i cant just set another value on mouse off.
Any help on making this a toggle style action?
I have this jsfiddle to show:
http://jsfiddle.net/T5Vm2/
Thanks!

That's not the way to do it, you have to use both handlers in hover()
$(".followbuttony").hover(function () {
$(".followbuttony").val('Unfollow');
},function() {
$(".followbuttony").val('Following');
});
FIDDLE
Personally, I like this better
$(".followbuttony").on('mouseenter mouseleave', function(e) {
$(".followbuttony").val(e.type=='mouseenter'?'Unfollow':'Following');
});
To store the initial value, change it, and then get it back, you can do :
$(".followbuttony").on('mouseenter mouseleave', function(e) {
if (e.type=='mouseenter') {
$(this).data('val', this.value).val('Unfollow');
}else{
$(this).val($(this).data('val'));
}
});
FIDDLE

You can pass two functions to hover event like this :
$(".followbuttony").hover(function () {
$(".followbuttony").prop('value', 'Unfollow');
},function() {
$(".followbuttony").prop('value', 'Following');
});
Click here - Jsfiddle