为什么TextArea的更改事件没有在我的ASP.net页面中触发

时间:2014-08-28 18:43:17

标签: jquery html asp.net updatepanel

我的asp.net页面中有以下代码:

<asp:UpdatePanel runat="server" ClientIDMode="Static" ID="upTaskDetailRight" UpdateMode="Conditional">
    <ContentTemplate>
        <div style="width: 98%; padding-bottom: 10px;" class="brClear">
            <div class="noteClass brClear">Notes</div>
            <div style="width: 98%; height: 120px;">
                <textarea id="taskNotes" runat="server" class="taskNotes" style="width: 100%; height: 100%; scrollbar-base-color: #A0A0A0; scrollbar-base-color: #A0A0A0; scrollbar-3dlight-color: #A0A0A0; scrollbar-highlight-color: #A0A0A0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: #FFFFFF; scrollbar-shadow-color: #A0A0A0; scrollbar-darkshadow-color: #A0A0A0;"></textarea>
            </div>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="btnComplete" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

转换为此HTML源代码:

<div id="upTaskDetailRight">
    <div style="width: 98%; padding-bottom: 10px;" class="brClear">
        <div class="noteClass brClear">Notes</div>
        <div style="width: 98%; height: 120px;">
            <textarea name="ctl00$ContentMain$taskNotes" id="ContentMain_taskNotes" class="taskNotes" style="width: 100%; height: 100%; scrollbar-base-color: #A0A0A0; scrollbar-base-color: #A0A0A0; scrollbar-3dlight-color: #A0A0A0; scrollbar-highlight-color: #A0A0A0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: #FFFFFF; scrollbar-shadow-color: #A0A0A0; scrollbar-darkshadow-color: #A0A0A0;"></textarea>
        </div>
    </div>
</div>

我有以下JQuery:

$(function () {
    $("body").on('change', "#ContentMain_taskNotes", function (e) {
        alert("changing");
    });
});

我想要它做的是,每次我对TextArea进行任何更改时,都应该向我显示changing警报,但是当我在TextArea中输入或删除任何内容时,没有任何事情发生。

我做错了什么,如何解决?

3 个答案:

答案 0 :(得分:3)

改为绑定input propertychange。这将在每次更改时发出警报。 change事件只有在离开textarea时才会触发。

$(function () {
    $("body").on('input propertychange', "#ContentMain_taskNotes", function (e) {
        alert("changing");
    });
});

JSFiddle

答案 1 :(得分:2)

当焦点丢失时,更改事件将触发,而不是在按下某个键时触发。如果您想要“在线”检测更改,则需要使用与关键相关的事件。

$("body").on('keyup', "#ContentMain_taskNotes", function (e) {
    alert("changing");
});

DEMO

答案 2 :(得分:2)

你可以尝试这样的东西来绑定多个选项

 $("#ContentMain_taskNotes").bind('blur change keyup',function (e) {
        alert("changing");
    });

如果仅用于keyup那么

 $("#ContentMain_taskNotes").bind('keyup',function (e) {
        alert("changing");
    });

JSflddle Demo