剑道UI电网单选按钮更改事件不触发？

Question

I have a Kendo grid which shows a questionnaire. The question id and question is fetched from the database using AJAX call. I am adding the radio buttons to the grid at run-time.

My problem is that the radio buttons are not firing the changed event. My code is below:

    <div style="height: 950px;" id="grdQuestions"></div>        

            <div style="text-align: center; margin-top: 10px;">
                <button class="k-button" id="submitresults" type="submit">Submit Results</button>
            </div>

 <script>
                $(document).ready(function () {

                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                type: "GET",
                                url: "/AjaxHandler.aspx?requesttype=getquestions",
                                dataType: "json",
                                contentType: "application/json; chartset=utf-8"
                            }
                        },
                        pageSize: 25
                    });

                    $("#grdQuestions").kendoGrid({
                        dataSource: dataSource,                          
                        pageable: {
                            pageSizes: true
                        },
                        columns: [
                        {
                            field: "QuestionsId",
                            title: "Question Id",
                            width:90
                        },
                        {
                            field: "QuestionText",
                            title: "Question",
                            width:700
                        },
                        {
                            title: "Not me at all",
                            template: "<input class='radioq' type='radio' name=" + "'" + "select" + '#: QuestionsId #' + "'" + "id=" + "'" + "notme" + '#: QuestionsId #' + "'" + "/>",
                        },
                        {
                            title: "This is true some of the time",
                            template: "<input class='radioq' type='radio' name=" + "'" + "select" + '#: QuestionsId #' + "'" + "id=" + "'" + "strue" + '#: QuestionsId #' + "'" + "/>"
                        },
                        {
                            title: "This is true most of the time",
                            template: "<input class='radioq' type='radio' name=" + "'" + "select" + '#: QuestionsId #' + "'" + "id=" + "'" + "mtrue" + '#: QuestionsId #' + "'" + "/>"
                        },
                        {
                            title: "This is me",
                            template: "<input class='radioq' type='radio' name=" + "'" + "select" + '#: QuestionsId #' + "'" + "id=" + "'" + "itsme" + '#: QuestionsId #' + "'" + "/>"
                        }]
                    });

                    $("input[type='radio']").on("change", function () {                            
                        alert(this.value);
                    });
                }); 
            </script>

Answer 1

Use this : this is to bind event for dynamically generated elements.

$(document).on("change","input[type='radio']", function () 
{                            
      alert(this.value);
});

Answer 2

you should use event delegation for that

 $(document).on("change","input[type='radio']", function () { 
    alert(this.value);
 });

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.