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");
}
Related
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");
I've created code for firing some click events. These events are just like nested with using functions. When I click the button the click event called multiple times.
For Ex. I've one button(b1) which opens a sidebar(already hidden). I've another button(b2) which is in the sidebar. When I open sidebar and click on b2 first time, then it's working fine that is it's calling one time. But when I close sidebar and open again the sidebar by using b1 and click on b2, click event triggered twice. Similarly, it triggers multiple times according to sidebar open using b1. Each time the triggers are increasing on click of b1
Below is my code:
<button class="b1">Show Sidebar</button>
<button class="b3">Hide Sidebar</button>
<div class="sidebar">
<input type="text" class="demo">
<button class="b2">Triggers</button>
</div>
<script>
function getSidebarEvents() {
$('.b2').click(function(){
console.log('Triggering Multiple times');
});
}
$('.b1').click(function() {
//Do something to open sidebar
getSidebarEvents();
});
$('.b3').click(function() {
//Do something to close sidebar
});
</script>
I know my function is calling multiple times on every click of b1 and click b2's event is initializing multiple time. But I can't change this structure with big changes because my code is so big now. I need something small change(s) that will help me to fix this.
You should assign the click event handler outside the function like so. Now if you want to simulate a click from inside that function, just call the click event.
function getSidebarEvents() {
$('.b2').click();
}
$('.b1').click(function() {
//Do something to open sidebar
getSidebarEvents();
});
$('.b2').click(function(){
console.log('Triggering Multiple times');
});
$('.b3').click(function() {
//Do something to close sidebar
});
so I wanted to make a button that when you click it it looks depressed and when you click it again it doesn't anymore. Though I also wanted that, if you click anywhere outside of the button it ALSO doesn't look depressed anymore.
Here's my JavaScript code so far:
if($('#taskbar-start').hasClass('taskbar-start-active') === false){
$('#taskbar-start').click(function() {
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
}
$(document).mouseup(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});
With that code the button gets depressed when I click it and undepressed when I click anywhere else, but if I click on the depressed button it gets undepressed for a moment and then depressed again (with the alerts, without the alerts it just stays depressed).
I've been researching and trying for a few hours now, I can't seem to find my issue. Sorry if the question is stupid, I'm still new to JavaScript/jQuery and still learning.
First, instead of alerts, press F12 and start using the Developer Tools. Second, instead of alerts use console.log and the other bunch of useful commands you can find under console (like console.time and console.timeEnd) whick will appear in the Console tab. And third, the problem is that the $(document).mouseup function gets called when you mouseup the entire document, which includes your button. You should exclude that function when the element click is the button.
You approach is fine. I stopped his propagation when clicked the button, as #MuhhamadImran said, but changed the mouseup to click for it to work.
$(document).ready(function(){
if($('#taskbar-start').hasClass('taskbar-start-active') === false) {
$('#taskbar-start').click(function(event) {
event.stopPropagation();
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
$(document).click(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});
}
});
Remember, when web developing, F12 is your friend.
Stop event bubbling when you click the button so it doesnt bubble up to the document to re-init the events/classes,
below is the corrected code, only one line added in button click function
if($('#taskbar-start').hasClass('taskbar-start-active') === false){
$('#taskbar-start').click(function(event) {
event.stopPropagation()
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
}
$(document).mouseup(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});
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.
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.