We Keep Coding

JavaScript event handling code get's called multiple times

I need your help. I'm currently working with a modal lib in JavaScript to display a modal for my customers:
https://github.com/vodkabears/Remodal/tree/1.1.1
Unfortunately my event handling in case the user clicks a button don't works like expected. When you take a look into the manual, you can see under the point Events the following event handler:
$(document).on('cancellation', '.remodal', function () {
console.log('Cancel button is clicked');
});
This one get's triggered for example when the cancel button get's pressed. Because I'm using one popup for multiple things, I need to attach the event handler to the call directly. So first I've wrote a function that opens the popup:
function openRemodal( remodalId ) {
let remodal = $( `[data-remodal-id=${remodalId}]` );
remodal.remodal().open();
return remodal; // <- added to handle events
}
I can call this function that way:
openRemodal( 'information-remodal' );
To get an event handling done, I've now returned the remodal in the function and re-wrote my call:
openRemodal( 'information-remodal' ).on( 'cancellation', function () {
alert( 'Test' );
} );
This seems to work but somehow when I repeat the opening of the popup and pressing the button, the alert get's shown multiple times increased by any new opening.
I'm not sure why this happens and why. Can you please help me get this working? I just want to call any function in there once - any time.

JQuery has a .one method ... try using that in place of .on. The callback should run only once. https://api.jquery.com/one/

On each time when you open model you attach function to cancelation event. so add new function and you never remove it. after first time you have one, then you have two... etc.
just attach it once, or remove it after handling event.
const modal = openRemodal( 'information-remodal' )
const handler = () => {
alert( 'Test' );
modal.off('cancellation', handler);
}
modal.on( 'cancellation', handler);

JS Function inside a click for a button is being called twice

Hi I have the following piece of code that is giving me weird behaviour
$("#cont_btn").click(function () {
$("#cont_btn").attr('disabled', 'disabled');
selRowIds = $("#CodeGrid").jqGrid('getGridParam', 'selarrrow');
rowsToJson(selRowIds);
//return false;
});
The button cont_btn is a button on a bootstrap 2 modal. It contains a continue button and a close button.
If I select the close button or click outside the modal to dismiss it, and then re-open the modal the function will get called twice.
I have tried using
.one('click', function() { ... }
and I have put break points on the line of
$("#cont_btn").click(...
click is not getting called twice. During my debugging I'm finding that the script re enters on the line of
$("#cont_btn").attr('disabled', 'disabled');
On the page load I see that the line of
$("#cont_btn").click(function () {
Is hit but the code does not enter the function it will skip to the close button. I presume this is the listener for both buttons being initialized ?
Googling this has suggested checking that the Script isn't called twice and using return false, but nothing has worked.
Any help is appreciated.

The event handler is inside the function that opens the modal, so everytime the modal is opened, the event handler is bound once more.

Jquery event function trigger once despite of multiple time attach

How can i do this
html
<button id="onclickpopupmenu">Test</button>
<button id="popupmenuok"></button>
javascript:
$("#onclickpopupmenu").bind("click",function(){
alert("this can execute multiple times")
$("#popmenuok").bind("click",function(){
alert("this has to be triggered only once eventhough the parent event trigger multiple times")
})
})
Please help me...

Only bind the handler once:
var popupmenuBound = false;
$("#onclickpopupmenu").bind("click",function(){
alert("this can execute multiple times");
if (!popupmenuBound) {
$("#popupmenuok").bind("click",function(){
alert("this has to be triggered only once eventhough the parent event trigger multiple times");
});
popupmenuBound = true;
}
});

There are a few ways to potentially interpret what you want.
The first is multiple clicks on the first button, which results in a single - but persistent (it reacts to every click) - event handler on the second button. To do that you could do this:
$('#onclickpopupmenu').click(function() {
// alert
$('#popupmenuok').off('click').on('click', function() {
// alert
});
});
jsFiddle demo
The second is multiple clicks on the first button, and for each click on that you get a one-time event handler on the second button. So if you click the first button once, then click the second button, you get an alert, but clicking the second button a second time does nothing. To do that:
$('#onclickpopupmenu').click(function() {
// alert
$('#popupmenuok').off('click').one('click', function() {
// alert
});
});
jsFiddle demo

$("#onclickpopupmenu").bind("click",function(){
alert("this can execute multiple times");
});
$("#popupmenuok").one("click",function(){
alert("this has to be triggered only once eventhough the parent event trigger multiple times");
});

The mouseEvent in a function fires twice if call again?

The problem is I would like to fire only once when the mouseevent function is triggered, e.g.
$(document).ready(function() {
$("#menu").click(function(){
$('#menu_div').show();
menu_function();
});
$("#menu_close").click(function(){
$('#menu_div').hide();
});
});
function menu_function(){
$(".select_li").live(
"click",
function() {
alert("test");
}
);
}
The example has two objects, menu and menu close; when the menu press, the ui box is shown, and run the menu_function , which fires an alert test message. The problem is when the menu_close is clicked and box closed, and open it again, the alert test will fire twice. I observe that the times of div box close and open again is the same as the fire times of the function, how can I fix it?
If I would like not using unbind, are there any better solution?

Your menu_function() is NOT just firing an alert test message - it is adding a live click listener to everything in the DOM that has a class of "select_li" that fires a test alert. This means that every time you click on #menu you are adding ANOTHER listener to .select_li - so if you click #menu 10x, you should have 10 listeners for each click of .select_li.
If you are truly trying to JUST show an alert when you click on #menu, your menu_function() should only look like this:
function menu_function() {
alert("test");
}

2 JavaScript events triggered sequentially - 2nd one ignored

I have an input text box and a button on a page.
have an onchange event on the text box and an onclick on the button. Each event triggers a totally separate unrelated method.
The problem is as follows:
if the user makes changes to the text box, then right away goes to click on the button - the onchange is triggered but I lose the onclick.
can I avoid this? I need both events to happen.
Thanks
Updated:
I tried a very simple test locally:
<input type="text" onchange="alert1();"/>
<input type="button" onclick="alert2();"/>
where the js is :
<script type="text/javascript">
function alert1()
{
alert("1");
}
function alert2()
{
alert("2");
}
</script>
changing the text and right away clicking on the button only triggers the first event. Is there a way to force the second event to happen?

An alert (along with other modal dialogs) is a bit of a special case, since it suspends execution of the remainder of the script until the user clicks OK. This is why your second handler falls through the cracks.
If you did something like document.write('foo') in your handlers instead, you wouldn't have this problem.

Try this,
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}​
It buffers the execution of each function so that the button's onclick can be triggered.