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

Capturing focus on a specific jQueryUI tab

I have jQueryUI tabs, and on a specific tab, I have defined a click function (the ajax call works correctly):
$("a[href='#tabs-1ua']").click(function (event, ui)
{
//ajax call
});
Now what I am trying to do is to accomodate not just clicks, but any type of focus on this tab in general, such as navigating to it using a keyboard arrow key for example. I tried activate in place of click, but I got an error. How can I capture all types of focus on a specific jQueryUI tab?
Thank you.

You should set "tabsactivate" listener while the tab has been activated. Please check below code.
//tabs is the id of UL in which all the tabs has been wrapped. Please replace it with according to your code.
$('#tabs').tabs({
activate: function(event ,ui){
if(ui.newTab.attr('href')=='#tabs-1ua'){
//make ajax call
}
});

focus() by default is accepted by input elements (<input>, <textarea>, <select>) and not <a> elements. Try adding a tab index to the anchor first:
$(document).ready(function () {
$("a[href='#tabs-1ua']").attr("tabindex", "-1").focus(function
(event, ui) {
// JS goes here
});
});

Try
$("a[href='#tabs-1ua']").on('click hover', function () {
// Do something for both
});

I got it working as follows:
I initialized tabs in my application using the class attribute instead of an id, and within it is specified the activate option. In there, I got the id of the currently active tab using $(".tabui .ui-tabs-panel:visible").attr("id"); where tabui is the name of the class. The code is below.
$('.tabui').tabs({
activate: function (event, ui)
{
//do something 1
var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id");
console.log (currentTab);
if(currentTab === "#tabs-1ua")
{
//do something 2
}
}
});
Thanks to all who replied trying to help me.

You do need to use the focus event for key movement, and can use it for mouse clicks as well. The focus event and related events are notoriously quirky in their behaviors, especially with respect to how they are implemented in frameworks and plugins. While I can't say just why, focus on the a element fires on a mouse click, and focus on the enclosing li element fires when you navigate to the element with keys. (Tested with Chrome.) So:
$("#myTabs").tabs();
$('#myTabs li, #myTabs a').on('focus', function(e, ui){
//do whatever
});
Demo

.keyup event not working

$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', ! $('input[name="list_checkbox_ids[]"]:checked').length);
});
The scenario is, I click on search button that generates a list of checkboxes. button_link should be defaulted to disabled until I select one of the checkboxes. Now in the above code, Howcome it does not remove the disabled? I tried looking for errors in the console but cannot find one. Pls help.
list_checkbox_ids are dynamically loaded on the page.

Can you change
This
$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});
Into this(using event delegation) for dynamically created content
$(document).on('keyup','input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});

D3 remove click events from one element out of a selection

I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle

here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});

For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.

Open pop-up box automatic with different ID in jquery

Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.
<script src="js/jquery-1.9.1.js"></script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
});
})(jQuery);
and here is pop-up
<div id="full-detail-box">this is pop up</div>

Try This
JS
for(var i=0;i<3;i++){
$('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
$('.btn-pro').bind('click', function(e) {
e.preventDefault();
var id=$(this).data('id');
// Triggering bPopup when click event is fired
$('#'+id).bPopup();
});
Instead Of this
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
UPDATED DEMO HERE

If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.

If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.
Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });
If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.