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");
});
Related
Here is my code:
socket.on("adddiv", id => {
document.getElementById("box").innerHTML += `<div id="div${id}"><h1>Hi</h1><button id="${id}">Hi</button><br><br></div>`;
document.getElementById(id).addEventListener("click", () => {
socket.emit("clicked", "...");
});
});
once I fire adddiv twice with different ids, the first that goes to the box element stopped having the eventlistener, and if I press the first button, the clicked wouldn't fire
EDIT:
I had to do it the "hard" way by firing the eventlistener again every time I have to fire a new one. But please comment below if you know why this is happening.
I'm currently recording all the mouse clicks on my html file. I have two functions for that. The first one is a general listener and records all the mouse clicks. The second one is for clicks on the html elements like buttons. The code for these two mouse events is below. When I click on a button the second function records this event. However when I click a second time on the same button right afterwards, the first function records it. In that case, I can't see on the log, that the click was on a button. How can I modify my code, so that even several consequent clicks on the button will be recorded by the respective function?
//general mouse click listener
document.addEventListener('click', showClickCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now() +" "+
event.clientX.toString()+"_"+event.clientY.toString());
}
//listener for html elements
document.getElementById("clickOnMe").addEventListener("focus", function(event) {focusFunction(event);});
function focusFunction(event) {
trackedData.push(Date.now()+" " +event.target.id );
}
The problem is that you are using a focus listener. That means that whenever you focus the button it will trigger that listener, so if you have already clicked it once, you will have to focus something else and then focus that button again. To fix the behavior you should just use a click listener instead.
var trackedData = [];
document.addEventListener('click', showMovementCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now() +" + event.clientX.toString() + "_" + event.clientY.toString());
console.log(trackedData);
}
document.getElementById("clickOnMe").addEventListener("click", function(event) {
focusFunction(event);
console.log(trackedData);
});
function focusFunction(event) {
trackedData.push(Date.now() + " " + event.target.id);
}
<button id="clickOnMe">Click on me</button>
I make a game and I have problem that I cant solve.
I have function and inside I have buttons with .click(). After I execute function for second time buttons clicks execute code twice for example I post here some simple code with same problem.
When I click 1st button alert is triggered once. When I click 2nd and then 1st button alert is triggered twice. I want trigger alert just once. Buttons must stay in function. Sorry for bad English.
Also jsfiddle here https://jsfiddle.net/o2gxgz9r/25237/
function testf() {
$("#1").click(function() {
alert("test");
});
$("#2").click(function() {
testf();
});
}
testf();
You need to unbind the click event before bind,
function testf() {
$("#1").unbind('click');
$("#1").click(function() {
alert("test");
});
$("#2").unbind('click');
$("#2").click(function() {
testf();
});
}
testf();
Somehow this function is binding your event twice. changing anything here removes the issue
$(".address_field").each(function(index){
var widget = new AddressFinder.Widget(this, "WR3NUKVGC4Q97FPHBJXL");
On a click function I have the option of playing audio.
The click is only fired once (after I added .off(), which I seem to have to do for every click event because I think there's something I fundamentally don't get about how javascript works) but the function added to the "ended" listener shows it is firing the number of times the button has been clicked. I presume .play() is also being fired multiple times.
These need to be inside the click event to get the id so how do I stop these kinds of things from happening, here and elsewhere when using js? Adding event.stopPropagation(), event.bubbles = false and .off() everywhere seems unnecessary (and in this case doesn't make a difference anyway).
$('.button').off().on('click', function(event){
event.stopPropagation();
event.bubbles = false;
var id = $(this).attr('id')
if ($(this).hasClass('hasAudio')) {
document.getElementById('audio_'+id).play();
document.getElementById('audio_'+id).addEventListener("ended", function(){
console.log("ended");
});
}
});
Move the ended event outside the click event,you are registering the event each time you click on the button
$('.button').on('click', function(event){
var id = $(this).attr('id')
if ($(this).hasClass('hasAudio')) {
document.getElementById('audio_'+id).play();
}
});
$('[id^="audio_"]').on("ended", function(){
console.log("ended");
});
Each time you click on the button a new event listener will be added to the ended event. To prevent that you can try defining the callback function before hand. That will prevent your event listener to be added in the event loop over and over.
An anonymous function has no signature, hence when you define the event with it, it will think that this is supposed to be a new event listener and invokes it multiple times. Check the working snippets to see the difference. Type something in the input box to see what is happening.
If this is confusing then removeEventListener can be the next option.
function ended(event){
console.log("ended");
}
$('.button').off().on('click', function(event){
event.stopPropagation();
event.bubbles = false;
var id = $(this).attr('id')
if ($(this).hasClass('hasAudio')) {
document.getElementById('audio_'+id).play();
document.getElementById('audio_'+id).addEventListener("ended", ended);
}
});
var input = document.getElementById('some');
function callback(event) {
console.log("PRINT");
}
input.addEventListener("keyup", callback)
// input.removeEventListener("keyup", callback)
input.addEventListener("keyup", callback)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="some" value="" >
Anonymous function as callback
var input = document.getElementById('some');
input.addEventListener("keyup", function(event) {
console.log("PRINT");
})
// input.removeEventListener("keyup", callback)
input.addEventListener("keyup", function(event) {
console.log("PRINT");
})
<input id="some" value="">
This fails because, every time you click the function, you add a new event listener to the button.
document.getElementById('audio_'+id).addEventListener("ended", function(){
console.log("ended");
This is repeatedly adding the event listener to the button.If you need this inside the click event, check to see whether it exists already. If it does, don't add it again.
Use global flag which defines if you want to pause or play. and also use preventDefault (in case of any inline click event used).
You have to remove the registered event listener after your task is completed.
document.getElementById('audio_'+id).removeEventListener("ended", function(){
console.log("ended");
});
Or what you can do is that move the logic for registering event listener outside the click event listener. Like this the event will be registered only once.
document.getElementById('audio_'+id).addEventListener("ended", function(){
console.log("ended");
});
}
$('.button').off().on('click', function(event){
event.stopPropagation();
event.bubbles = false;
var id = $(this).attr('id')
if ($(this).hasClass('hasAudio')) {
document.getElementById('audio_'+id).play();
});
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");
}