jQuery 1.4.2 Using .delegate() on a change event for a doropdown list

Question

My problem is that I am not sure how to use .delegate for the following scenario:

our application has a voting system to which several rounds or steps can be added. every time a new step is added there is a list of options that defines how the round/step is to be won.

<select class="listOfOptions">
<option value="U">Unanimous</option>

<option value="M">Majority</option>

<option value="C" class="customOption"># of votes…</option>

</select>

now when an option is selected the following code runs

$(document).ready(function() {

  $('.listOfOptions').live('change', function() {
    if ($(this).find(':selected').attr('class') == 'customOption') {
      // DO SOMETHING!!
    }
    else {
      // DO SOMETHING ELSE
    }
  });

});

This code runs perfectly on every other browser except IE.

How would I use .delegate() on as a replacement of .live for this case?

Thank you.

Answer 1

This would be the syntax used with .delegate() for this particular case. Notice that the 'listOfOptions' is the class of the drop-down list.

$('body').delegate('.listOfOptions', 'change', function() {
    if ($(this).find(':selected').attr('class') == 'customOption') {
      // DO SOMETHING!!    
    }
    else {
      // DO SOMETHING ELSE      
    }
  });

It works like a charm in all browsers.

Answer 2

Don't forget to write the delegating in a $(function() {}); block or in $(document).ready(function() {});

It won't work in IE 7-9 otherwise.