javascript - Changing the onclick event delegate of an HTML button? - Stack Overflow

admin管理员组

文章数量:1345400

How do you change the JavaScript that will execute when a form button is clicked?

I've tried changing its onClicked and its onclicked child attributes like so:

$('mybutton').onClick = 'doSomething';

and

$('mybutton').attributes["onclick"] = 'doSomething()';

Neither seem to work. My other options are:

1. To have two buttons and hide one and show the other.
2. To have it directed to a function that evals a string and change the string to the function I want to execute.

Neither seem very elegant.

I'm using Prototype as a js library so it that has any useful tools I can use them.

How do you change the JavaScript that will execute when a form button is clicked?

I've tried changing its onClicked and its onclicked child attributes like so:

$('mybutton').onClick = 'doSomething';

and

$('mybutton').attributes["onclick"] = 'doSomething()';

Neither seem to work. My other options are:

1. To have two buttons and hide one and show the other.
2. To have it directed to a function that evals a string and change the string to the function I want to execute.

Neither seem very elegant.

I'm using Prototype as a js library so it that has any useful tools I can use them.

• javascript
• prototypejs

Share Improve this question Follow edited Dec 28, 2011 at 11:45 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked May 21, 2009 at 14:28 Omar KoohejiOmar Kooheji 55.8k7171 gold badges186186 silver badges243243 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

If the original onclick event was set through HTML attributes, you can use the following to overwrite it:

$("#myButtonId").setAttribute("onclick", "myFunction();");

For Prototype, I believe that it would be something like this:

$("mybutton").observe('click', function() {
     // do something here
});

EDIT: Or, as it says in the documentation, you could simply specify the function you want to call on click:

$('mybutton').observe('click', respondToClick);

function respondToClick(event) {
    // do something here
}

But this is all, again, Prototype-specific.

Using the Prototype framework you can do:

Event.observe("mybutton", "click", clickHandler);

or:

Event.observe("mybutton", "click", function() {
  alert("Button clicked!");
});

or:

$("mybutton").observe("click", clickHandler);

or:

$("mybutton").observe("click", function() {
  alert("Button clicked!");
});

• See the Event class documentation

The general way to set an onclick handler in javascript is to set onclick to a function, by passing it the name of a function directly, not in a string. So if myButton is set to a DOM Element, you would write:

myButton.onclick = doSomething;

So when you click the 'mybutton' button, the doSomething function will be called as doSomething(). For anonymous functions, you can write:

myButton.onclick = function() {
    alert("myButton was clicked!");
};

In JQuery it's

$("#myButtonId").click(myFunction);


function myFunction(){
 alert("Clicked");
}

Or if you want to put the function inline:

$("#myButtonId").click(function(){
     alert("Clicked");
});

If you are using JQuery firstly make sure you use the relevant selector prefix (IE: If your using the Id of the element put a # in front of it). Secondly it's the click method to assign a callback to the click event.

Last I used Prototype, it was something like this:

Event.observe('mybutton', 'click', doSomething);

By the way, your examples might've even worked if you didn't quote the function names.

EDIT: Yes, Element.observe(element, eventName, handler) and someElement.observe(eventName, handler) also work. And don't quote the handler name - you want to pass the function not a string!

I found a solution for your issue with prototype under firefox:

$("#myButtonId").writeAttribute('onclick', ''); // first remove the attribute
$("#myButtonId").observe('click', function () { ... }); // then add the event

本文标签： javascriptChanging the onclick event delegate of an HTML buttonStack Overflow