jQuery + Jeditable-检测何时更改选择 [英] jQuery + Jeditable - detect when select is changed

问题描述

我正在使用可编辑进行就地编辑.我正在使用的控件之一是select类型.当用户单击该字段时，将生成以下select控件:

<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>

我要弄清楚的是如何使用jQuery检测何时更改了select控件，尤其是因为它没有ID属性.

这是我到目前为止的内容，但未触发该事件:

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

---

更新

通过使用Matt的解决方案，更新到jQuery 1.4.2解决了我的问题.

解决方案

您可能会找到它，因为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"));
    });
});

这篇关于jQuery + Jeditable-检测何时更改选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！