Question

I have a onclick attribute ontag now that gets set serverside with the REQUIRED_ID for when the user clicks on it.
The problem now is that I am trying a more jQuery-like approach where I do set the click handlers on document ready but now I don’t have the REQUIRED_ID at hand to set it.
I’m wondering what would be the jQuery way of doing this, perhaps setting another tag with the REQUIRED_ID and reading it on ready?

NOW:

$.ready(
    $('select.attr_satus>option:not(:selected)').each( 
        /* I AM MISSING REQUIRED_ID, WHERE DO I GET THIS VVVVVV*/
        $(this).click(function(){ statusChanged(this,REQUIRED_ID,$(this).val()); }) 
    );
);

BEFORE:

<select class="attr_status">
<option onClick='statusChanged(this,REQUIRED_ID,"draft");' value='draft'>Draft</option>
<option value='publish' selected="true">Published</option>
</select>

REQUIRED_ID is an id that changes per row, as I have several of those select tags one after each other.

Answer 1

You can store your extra information in “data-” attributes:

<select class="attr_status">
  <option  data-requiredId='REQUIRED_ID' value='draft'>Draft</option>

Then in your event handler you can get it with “.data()”:

$(this).click(function() {
  statusChanged(this, $(this).data('requiredId'), this.value);
});

edit — Now “data-” attributes are standardized with HTML5. Another approach is to use the “class” string, which can contain pretty much anything. What I’ve done is use a “name:value” notation:

<select class="attr_status">
  <option  class='requiredId:REQUIRED_ID' value='draft'>Draft</option>

Then in the handler:

$(this).click(function() {
  var id = this.className.replace(/^.*\brequiredId:(\S+).*/, '$1');
  statusChanged(this, id, this.value);
});