[Solved] Standard JQuery 'change' event not firing in IE

[Nicholas]

We are using a number of Telerik MVC NumericTextBox controls within our solution. On a particular page we have needed to use the JQuery change event handler for the numeric text box's input field rather than the OnChange event provided by Telerik. The reason for this is that each row in our table has repeated text boxes, the change events are registered and maintained using a custom jquery plugin. We have bound the events as per the example on the forum post http://www.telerik.com/community/forums/aspnet-mvc/numericinput/subscribing-to-onchange-in-javascript.aspx which works in Firefox and Chrome, however, in IE the even never fires.
Example page is as follows (this works in Firefox but not IE - any assistance would be greatly appreciated)

Telerik MVC v2011.1.315

@(Html.Telerik().NumericTextBoxFor(m => m.Number))

@{Html.Telerik()
      .ScriptRegistrar()
      .OnDocumentReady(

      @<text>

      $('#Number').bind('change', function() {
        alert('number on change event fired');
      });

    </text>);
}

[Georgi Krustev]

Hello Nicholas,

 
Currently, the numerictextbox component prevents DOM change event of the input.
We will address this limitation with the next official release of Telerik extensions for ASP.NET MVC scheduled for the middle of July.

Regards,
Georgi Krustev
the Telerik team

[Nick]

Has this issue been addressed in the latest version? If so, can you please provide some sample code for DOM change event of the input?
Thanks

[Georgi Krustev]

Hello Nick,

 
The issue was addressed in the Q2 2011 release of Telerik Extensions for ASP.NET MVC. You can wire the DOM change event using this code snippet:

<%= Html.Telerik().NumericTextBox()
        .Name("NumericTextBox")
        .Spinners(Model.NumericShowSpinners.Value)
        .MinValue(Model.NumericMinValue.Value)
        .MaxValue(Model.NumericMaxValue.Value)
%>

<%
    Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
    {
        %>
            $("#NumericTextBox").bind({
                change: function() {
                    console.log("DOM change");
                },
                valueChange: function(e) {
                    console.log("Numeric event: " + e.newValue);
                }
            });
        <%
    });
%>

Please note that the DOM change event will be raised only when end user modify the input content. If you need to handle value changing when Up/Down arrow is clicked I will suggest you wire "valueChange" event which is the change event of the NumericTextBox component.

Regards,
Georgi Krustev
the Telerik team

[Nick]

Thanks for the fast reply. I updated to the latest version, and binding the valueChange event works perfectly.