javascript function execute more times when i click with jquery button

Question

I try make button with jQuery I call the JavaScript function, but I got problem :

after page loaded, first time click on mybutton there is no reaction
second click will execute function twice
third click will execute function three and more

Why my code execute many more ? I just want " 1 click 1 execution JavaScript function" my code like this

<script type="text/javascript" language="javascript">

function showcase(){
    var foo = function () {
         alert('tutup');
    };
    $('#create-new').on('click',foo);
    return false;
}</script> <button class="button" id="create-new"onclick="return showcase();">show text</button>

please help me out this problem

for try my full error code at here http://jsbin.com/ovucer/1/edit

thx u all.. i get the answer... very helpfull..thx u. CASE CLOSED — sigit-newbie
– sigit-newbie, Commented Jul 24, 2013 at 1:48

Arun P Johny · Accepted Answer · 2013-07-23 09:36:36Z

3

You are registering multiple click event listeners to the element

Every time you click on the button you are adding a new click handler to the button using showcase method, it is not needed

<button class="button" id="create-new">show text</button>
<script type="text/javascript" language="javascript">
    var foo = function () {
         alert('tutup');
    };
    $('#create-new').on('click',foo);
</script>

edited Jul 23, 2013 at 9:36

answered Jul 23, 2013 at 9:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VisioN · Accepted Answer · 2013-07-23 09:30:08Z

2

This happens because you bind a click event, which calls showcase() function, which as well binds a new click event, that calls foo() method. And the last iteration is repeated every time you click the button. This is sort of recursion working here.

The right way will be to bind a click event a single time, after the element is loaded:

<button class="button" id="create-new">show text</button>

<script type="text/javascript">
    $("#create-new").on("click", function() {
        alert("tutup");
    });
</script>

answered Jul 23, 2013 at 9:30

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

Jochen Ullrich · Accepted Answer · 2013-07-23 09:31:14Z

1

You are registering an onclick function in onclick,

use this:

$('#create-new').on('click', function(){ alert('text button'); return false; });

answered Jul 23, 2013 at 9:31

Jochen Ullrich

5785 silver badges22 bronze badges

Comments

emerson.marini · Accepted Answer · 2013-07-23 09:32:07Z

1

You're binding the click event twice. Using onclick on the HTML and over again, using jQuery .on().

To make your life easier, and as you're using jQuery already, do it just at the document ready event:

var foo = function () {
  alert('text button');

  return false;
};

$(function () {
  $('#create-new').on('click',foo);
});

And fix your HTML bit, by removing the onclick:

<button class="button" id="create-new">show text</button>

answered Jul 23, 2013 at 9:32

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Comments

Michael Unterthurner · Accepted Answer · 2013-07-23 09:39:20Z

0

try this in your script tag and delete the onclick event in the button:

var foo = function () {
    alert('tutup');
};
$('#create-new').on('click',foo);
return false;

edited Jul 23, 2013 at 9:39

answered Jul 23, 2013 at 9:32

Michael Unterthurner

9511 gold badge10 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript function execute more times when i click with jquery button

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related