jquery - JavaScript: pass arguments to onclick handler - Stack Overflow

admin管理员组

文章数量:1336148

I need to pass extra arguments to onclick handler. I can't decide which way is "better":

EDIT:
Context: I have a table that shows roster of an event. Each row has a 'delete' button. What is a better way to pass recordId to the delete-handler?

$('a.button').click(function() {
    var recordId = $(this).metadata().recordId;
    console.log(recordId);
});
...
<tr>...<a class='{recordId:1} button'>delete</a></tr>
<tr>...<a class='{recordId:2} button'>delete</a></tr>

or

function delete(recordId) {
    console.log(recordId);
}
...
<tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr>
<tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr>

What are the pros and cons for each option?

NOTE: I use a.button as a custom, CSS-styled button, it does not behave as a link.

EDIT:
I would appreciate alternative solutions as well, if you can argument the advantages of offered alternatives.

I need to pass extra arguments to onclick handler. I can't decide which way is "better":

EDIT:
Context: I have a table that shows roster of an event. Each row has a 'delete' button. What is a better way to pass recordId to the delete-handler?

$('a.button').click(function() {
    var recordId = $(this).metadata().recordId;
    console.log(recordId);
});
...
<tr>...<a class='{recordId:1} button'>delete</a></tr>
<tr>...<a class='{recordId:2} button'>delete</a></tr>

or

function delete(recordId) {
    console.log(recordId);
}
...
<tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr>
<tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr>

What are the pros and cons for each option?

NOTE: I use a.button as a custom, CSS-styled button, it does not behave as a link.

EDIT:
I would appreciate alternative solutions as well, if you can argument the advantages of offered alternatives.

• javascript
• jquery

• Is this a simplified example in terms of parameters passed? – serg Commented Aug 13, 2010 at 20:01
• @serg555: I have change the question so it uses recordId as an argument, instead of Yes/No – THX-1138 Commented Aug 13, 2010 at 20:07

4 Answers 4

Store the record id as an attribute of element itself, but instead of using the metadata plugin which stores it in a weird format, I would remend you use HTML5's data attributes that is also backwards patible.

A row would look like:

<tr> .. <a data-id="1">delete</a> .. </tr>

In the handler, retrieve the attribute value and act on it

function deleteRecord() {
    var rowId = $(this).attr('data-id');
    ...
}

It is parable to using the metadata plugin, but it does not overload the class attribute. No extra plugins are needed for this. It uses a single handler just as the metadata plugin does which is performant for large datasets.

The inline onclick handlers are bad for the same reasons. A new handler is created per row. It cuts down on flexibility and is generally a bad practice.

I would just go with your second approach - it's the simplest and there is nothing wrong with it.

$('a.button').click(function() {
    var classes = $(this).attr('class').split(' ');
    var option;

    for( var i in classes )
    {
      if( classes[i].indexOf( 'option' ) != -1 )
      {
        option = classes[i].substr( 6 );
        break;
      }
    }

    console.log( option );
});
...
<a class='option-yes button'>Yes</a>    
<a class='option-no button'>No</a>

Edit:
It sounds like you're assigning data to these 'buttons' dynamically. You'd be better off assigning the data to the button using jQuery's .data() method and then getting the data from there. I have updated my example code.

If each type of button performs a different action then use a different handler for each type of button:

$('a.button').click(function (e) {
  // Stuff with $(this).data().recordId
});

$('a.button.no').click(function (e) { //Stuff });

...
<a class="button yes">Yes</a>
<a class="button no">No</a>

本文标签： jqueryJavaScript pass arguments to onclick handlerStack Overflow