jQuery + Jeditable - detect when select is changed

Question

I'm using Jeditable for in-place editing. One the controls I am working with has the select type. When a user clicks on the field, the following select control is generated:

<div id="status" class="editable_select">
    <form>
        <select name="value">
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
        </select>
        <button type="submit">Save</button>
        <button type="cancel">Cancel</button>
    </form>
</div>

What I am trying to figure out is how to use jQuery to detect when that select control is changed, especially since it doesn't have an ID attribute.

This is what I have so far, but the event is not getting triggered:

$(document).ready(function () {
    $('#status select').change(function () {
        alert("Change Event Triggered On:" + $(this).attr("value"));
    });
});

---

UPDATE

Updating to jQuery 1.4.2 solved my problem along with using Matt's solution.

Answer 1

You'll probably find its because the select field is been added to the page after it's loaded (and after your event bindings take place).

You can still capture change events if this is the case by using live

$(document).ready(function () {
    $('#status select').live('change', function () {
        alert("Change Event Triggered On:" + $(this).attr("value"));
    });
});

Note that since 1.7 however, the on() method is the preferred way to bind event handlers. The equivalent of the above is;

$(document).ready(function () {
    $(document).on('change', '#status select', function () {
        alert("Change Event Triggered On:" + $(this).attr("value"));
    });
});