jquery bind/click vs document.onclick - bind callback is called multiple times

Question

Hi,

I have a button named okbutton.

A callback function is bind to the click event of the okbutton during page load

$('#okbuttonid').bind('click',function() { alert('here'); })

The first time i click the okbutton it alerts once. as expected.

When i click the next time it alerts twice and for the third time it alert thrice and it goes on. same is for $('#okbuttonid').click = function() { alert('here'); }

But

when i do it like

document.getElementById('okbuttonid').onclick = function() { alert('here'); }

it alerts only once. for every click it alerts only once.

when is with the bind event.

it it like that the alert is called the number of times we bind its event.

why is it so?

do we have to remove every time we bind.

Shall i use the native event style instead of bind?

The native event bind is working well but i want to know what this jquery bind does

---

I am editing/adding the following after the first answer by Nick Craver

---

1. I have a list which needs a change status option(totally 4 options).
2. I display a change status link which when clicked displays a status box and on ok button which is positioned absolutely above the change status link.
3. i display it like a tooltip popup.
4. at the time of showing the statuschange popup i am attaching the okbutton onclick to a function which when clicked sends an ajax request.
5. above is my scenario.

for this i dont want to use document.ready

my code is like the following

<div id='statusdiv' style='display:none; position:absolute;'><!-- and more styles -->
<select><!-- list of options --></select>
<input id='okbutton' value='OK'>
</div>

when the user clicks changestatus link i show this div and bind a callback for the click event of okbutton.

this html part could be totally dynamic so no inline event attach.

function changestatus()
{
   //display the statusdiv absolutely above the mouse event triggered place
   $('#okbutton').bind('click',function() {
     //ajax request
   })
}

The native event bind is working well but i want to know what this jquery bind does

Answer 1

You're attaching multiple event handlers, one each .bind() call, just don't call this multiple times:

$('#okbuttonid').bind('click',function() { alert('here'); })

an you won't get multiple alerts...just call it once on document.ready, for example:

$(function() {
  $('#okbuttonid').bind('click',function() { alert('here'); })
});

Answer 2

$(function() {
  $('#okbuttonid').bind('click',function() { alert('here'); })
});

is fine, since the okbutton is allready in the DOM.

try

$(function() {
  $('#okbuttonid').live('click',function() { alert('here'); })
});

to bind the event to the document and the click event bubbles up to the document and triggers the function

a much better way is to use delegate:

$(function() {
  $('#parentOfokbutton').delegate('#okbutton','click',function() { alert('here'); })
});

this binds the event to 'parentOfokbutton' an is nearly the same as the 'live' function but the event don't has to bubble up the DOM

if you still want to use the bind function (for some reason) prepend an unbind methode:

$(function() {
     $('#okbuttonid').unbind('click').bind('click',function() { alert('here'); })
});