jQuery: change function not being induced?

Question

i have the following jquery code:

$(document).ready(function() {
            $('.restrictiveOptions input[type!=checkbox], .restrictiveOptions select').change(function() {
                // check off enabled for that row if anything changed
                $(this).closest('.fieldRow').find('.restrictiveOptionEnabled').attr('checked','true');
                alert('changed');
            });
        });

however, when i change the inputs or selects, nothing happens (not even the alert)!

i have checked that $('.restrictiveOptions input[type!=checkbox], .restrictiveOptions select') is correct (by using firebug console and checking the .length, which returned 484). i have also made sure there are no syntax errors.

what do you think i'm doing wrong? thanks!

EDIT: i've updated the code and changed $(self) to $(this), but am still not seeing an alert. here is sample html (sorry for the formatting, i added line breaks but it is generated by php):

<fieldset class="restrictiveOptions"><legend class="collapsable">
<img width="12" height="12" title="Collapse" alt="Collapse" class="toggle" src="branding/default/images/collapse.gif"> Restrictive Options</legend>
<div style="">
<div class="fieldRow">
<div class="label">
<label>Executive</label></div>
<div class="fieldWrapper">
<div class="cellValue">
<select onchange="changeRestrictionValue(&quot;event42_41&quot;)" id="event42_41_restrictionType" name="event42_41_restrictionType">
<option selected="selected" value="1">is equal to</option>
<option value="2">is not equal to</option></select> 
<span id="event42_41_restrictionValue1Wrapper" class="event42_41_restrictionValueWrapper">
<select onchange="validateField(this)" name="event42_41_restrictionValue" id="event42_41_restrictionValue">
<option value="76">Yes</option>
<option value="77">No</option></select></span>
<span style="display: none;" id="event42_41_restrictionValue2Wrapper" class="event42_41_restrictionValueWrapper">
<select onchange="validateField(this)" name="event42_41_restrictionValue1" id="event42_41_restrictionValue1">
<option value="76">Yes</option>
<option value="77">No</option></select> and 
<select onchange="validateField(this)" name="event42_41_restrictionValue2" id="event42_41_restrictionValue2">
<option value="76">Yes</option>
<option value="77">No</option></select></span></div>
<div style="float: right;" class="cellValue">
<label for="event42_41_enabled">Enabled?</label>
<input type="checkbox" style="vertical-align: sub; margin: 2px; padding: 0pt;" class="restrictiveOptionEnabled" title="Check me to enable this restrictive option" name="event42_41_enabled" id="event42_41_enabled" value="">
</div></div></div>

Answer 1

Instead of self, you need this, like this:

$(document).ready(function() {
  $('.restrictiveOptions input[type!=checkbox], .restrictiveOptions select').change(function() {
    $(this).closest('.fieldRow').find('.restrictiveOptionEnabled').attr('checked', true);
    alert('changed');
  });
});

Inside an event handler like this, this refers to the element in question, self is often used to hang onto a reference of some sort, but it's not inherently available, it's something you need to define. In this case, it's trying to do $(undefined), which isn't exactly what you want :)

Answer 2

This shouldn't make any difference unless there's something going on that you haven't mentioned. Instead of directly binding the handler to all those elements, try setting up a "live" handler:

$(function() {
  $('.restrictiveOptions input[type!=checkbox], .restrictiveOptions select')
    .live('click', function(ev) {
      $(this).closest('.fieldRow').find('.restrictiveOptionEnabled').attr('checked','true');
      alert('changed');
  });
});