且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery + Jeditable-检测何时更改选择

更新时间:2023-12-02 10:43:34

您可能会找到它,因为select字段是在加载后(以及事件绑定发生之后)添加到页面的.

在这种情况下,您仍然可以使用实时

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

请注意,但是从1.7开始, on() 方法是绑定事件处理程序的首选方法.等同于以上

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

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.

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"));
    });
});