Using argument (this) passed via element eventhandler

Question

Hey guys,

I want to use the argument I pass (this) in a JS function and treat it as an jQuery variable. Example:

<script>    
function useMe(obj){
  $(obj).val();
  ...
  ... 
  ...
}
</script>


<select id="selectid" onChange="useMe(this)">
    <option>......</option>
</select>

Is there a possibility to treat the passed argument as a jQuery element?

Btw. I need to do it this way, because the select-element isn't created on load. The select element will be created later asynchronously.

So, this won't work:

$("select").each(function (i){
    var select_id = $(this).attr("id");                
    $(this).change(function(e){  

because it doesn't exist yet.

Thanks for your help.

Answer 1

If the element doesn't exist at the document load it means that it is later added maybe by an AJAX call. If this is the case just put the change handle registration in the success callback.

$.ajax({
    url: '/somescript',
    success: function() {
        // some code that injects the select into the DOM
        // ...
        $("select").each(function(i) {
            var select_id = $(this).attr("id");                
            $(this).change(function(e) {
                // ...
            });
        });
    }
});

Answer 2

If your element isn't created on load, and loaded asynchronously instead you can bind the change event like this:

$('select').live('change',function(){
  // ...
});

This will bind the defined function to the change event on every existing and on every new select item.

Update: You need at least jQuery 1.4.1 for this

Answer 3

If you do choose to stick with your onchange attribute (which I would advise against), just use:

<script>    
function useMe($obj){
  $obj.val();
  ...
  ... 
  ...
}
</script>

<select id="selectid" onChange="useMe($(this))">
    <option>......</option>
</select>