Styjun

How to train a replacement without them knowing?

Which manga depicts Doraemon and Nobita on Easter Island?

What does a comma signify in inorganic chemistry?

Representing an indicator function: binary variables and "indicator constraints"

Do predators tend to have vertical slit pupils versus horizontal for prey animals?

From where do electrons gain kinetic energy through a circuit?

Does knowing that the exponent is in a certain range help solving discrete log?

Why does this image of cyclocarbon look like a nonagon?

Quick destruction of a helium filled airship?

Output with the same length always

What if a restaurant suddenly cannot accept credit cards, and the customer has no cash?

Programming a recursive formula into Mathematica and find the nth position in the sequence

Combinatorial Argument for Exponential and Logarithmic Function Being Inverse

What was the intention with the Commodore 128?

Subgroup generated by a subgroup and a conjugate of it

Will some rockets really collapse under their own weight?

Rotate List by K places

How do I answer an interview question about how to handle a hard deadline I won't be able to meet?

Number of matrices with bounded products of rows and columns

Is a suspension needed to do wheelies?

A reccomended structured approach to self studying music theory for songwriting

Which basis does the wavefunction collapse to?

Does the Temple of the Gods spell nullify critical hits?

How do the Durable and Dwarven Fortitude feats interact?

JSFiddle does not manage click events inside a function

What does the exclamation mark do before the function?Is there a download function in jsFiddle?jsFiddle: no connection between html and js? Can't call simple function from button?Why does preventDefault() of a click event also prevent my form from submitting?Anchor tag's onclick isn't executing a simple jQuery function in jsfiddleJQuery not executing functions, works in JSFiddle but not WordpressWhat specifically will successfully trigger a JavaScript click event in JSFiddle?jsfiddle identical(?) fiddles with button to change text one works one does notgetorgchart - click event occuring twiceHow to stop event propagation in jQuery click function inside click function?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I have a very simple JSFiddle

HTML

<input type="button" value="Submit" id="myBtn" onclick="foo()">

JS

function foo()
 console.log('click');

 $("#myBtn").click(function(event) 
 console.log('click2');
 );

 console.log('click3');

Here's the link: https://jsfiddle.net/mdvyo481/

I've already loaded the script in No Wrap - Head mode. Strangely, when I click on the button, click and click3 are printed in console but click2 is not printed. If I click on it again, I get 2 prints of click2.

Looks like event is not properly managed in the fiddle. Is there a way to fix?

javascript jsfiddle

share|improve this question

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Nothing to do with JSFiddle, your code is wrong. It will behave exactly the same way in a browser.
  
  – Robin Zigmond
  Mar 27 at 13:32
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  To be more constructive, your event handler foo directly logs click and click3, and inbetween simply adds another click handler, which will log click2. So you won't see that until the next time you click it. And each subsequent click will add another handler, therefore click2 will get logged more and more times. Basically, you should never add event listeners (for the same event) inside an event handler.
  
  – Robin Zigmond
  Mar 27 at 13:33
  
  

  
  
  
  

add a comment | 

2

I have a very simple JSFiddle

HTML

<input type="button" value="Submit" id="myBtn" onclick="foo()">

JS

function foo()
 console.log('click');

 $("#myBtn").click(function(event) 
 console.log('click2');
 );

 console.log('click3');

Here's the link: https://jsfiddle.net/mdvyo481/

I've already loaded the script in No Wrap - Head mode. Strangely, when I click on the button, click and click3 are printed in console but click2 is not printed. If I click on it again, I get 2 prints of click2.

Looks like event is not properly managed in the fiddle. Is there a way to fix?

javascript jsfiddle

share|improve this question

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Nothing to do with JSFiddle, your code is wrong. It will behave exactly the same way in a browser.
  
  – Robin Zigmond
  Mar 27 at 13:32
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  To be more constructive, your event handler foo directly logs click and click3, and inbetween simply adds another click handler, which will log click2. So you won't see that until the next time you click it. And each subsequent click will add another handler, therefore click2 will get logged more and more times. Basically, you should never add event listeners (for the same event) inside an event handler.
  
  – Robin Zigmond
  Mar 27 at 13:33
  
  

  
  
  
  

add a comment | 

I have a very simple JSFiddle

HTML

<input type="button" value="Submit" id="myBtn" onclick="foo()">

JS

function foo()
 console.log('click');

 $("#myBtn").click(function(event) 
 console.log('click2');
 );

 console.log('click3');

Here's the link: https://jsfiddle.net/mdvyo481/

I've already loaded the script in No Wrap - Head mode. Strangely, when I click on the button, click and click3 are printed in console but click2 is not printed. If I click on it again, I get 2 prints of click2.

Looks like event is not properly managed in the fiddle. Is there a way to fix?

javascript jsfiddle

share|improve this question

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

<input type="button" value="Submit" id="myBtn" onclick="foo()">

function foo()
 console.log('click');

 $("#myBtn").click(function(event) 
 console.log('click2');
 );

 console.log('click3');

share|improve this question

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

share|improve this question

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

asked Mar 27 at 13:31

floatingpurrfloatingpurr

2,10155 gold badges1818 silver badges5656 bronze badges

2 Answers
2

active

oldest

votes

2

This is correct behaviour. The reason this happens is because you bind the event click when you call the foo function. The first time you call foo you bind the event, the second time you bind it again and so on. Binding an event doesn't remove the previous bind, so if you click submit 10 times, you will bind 10 different click eventhandlers, all doing the same thing and you'll receive 'click2' 10 times in the console.

share|improve this answer

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

add a comment | 

1

Either add a click handler on your button using jquery or by using the onclick attribute, not both.

I've provided two examples to illustrate this:

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

Reason for your example not working is that you are setting the jquery click handler only after calling foo(), so it will not also trigger.

share|improve this answer

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55378466%2fjsfiddle-does-not-manage-click-events-inside-a-function%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

This is correct behaviour. The reason this happens is because you bind the event click when you call the foo function. The first time you call foo you bind the event, the second time you bind it again and so on. Binding an event doesn't remove the previous bind, so if you click submit 10 times, you will bind 10 different click eventhandlers, all doing the same thing and you'll receive 'click2' 10 times in the console.

share|improve this answer

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

add a comment | 

2

This is correct behaviour. The reason this happens is because you bind the event click when you call the foo function. The first time you call foo you bind the event, the second time you bind it again and so on. Binding an event doesn't remove the previous bind, so if you click submit 10 times, you will bind 10 different click eventhandlers, all doing the same thing and you'll receive 'click2' 10 times in the console.

share|improve this answer

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

add a comment | 

This is correct behaviour. The reason this happens is because you bind the event click when you call the foo function. The first time you call foo you bind the event, the second time you bind it again and so on. Binding an event doesn't remove the previous bind, so if you click submit 10 times, you will bind 10 different click eventhandlers, all doing the same thing and you'll receive 'click2' 10 times in the console.

share|improve this answer

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

share|improve this answer

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

answered Mar 27 at 13:34

Vladimir BogomolovVladimir Bogomolov

1,06877 silver badges1313 bronze badges

1

Either add a click handler on your button using jquery or by using the onclick attribute, not both.

I've provided two examples to illustrate this:

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

Reason for your example not working is that you are setting the jquery click handler only after calling foo(), so it will not also trigger.

share|improve this answer

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

add a comment | 

1

Either add a click handler on your button using jquery or by using the onclick attribute, not both.

I've provided two examples to illustrate this:

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

Reason for your example not working is that you are setting the jquery click handler only after calling foo(), so it will not also trigger.

share|improve this answer

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

add a comment | 

Either add a click handler on your button using jquery or by using the onclick attribute, not both.

I've provided two examples to illustrate this:

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

Reason for your example not working is that you are setting the jquery click handler only after calling foo(), so it will not also trigger.

share|improve this answer

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

function foo(element) 
 console.log(element.id + ' was clicked <- onclick attribute handler')



$("#myBtn").click(function(event) 
 console.log(event.target.id + ' was clicked, <- jQuery handler')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

share|improve this answer

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges

answered Mar 27 at 13:38

WebberWebber

1,3631313 silver badges1717 bronze badges