Question

我正在尝试将Eventhandler添加到放置在jQuery DataTable中的RadioButtons。我可以通过添加＆＃39; live＆＃39;来实现这一点。功能如下：

$("input[name='Button0']").live("change", function() {
    radioValue[0] = $(this).val();
});

为每个DataTable Row动态生成按钮名称。我有一个问题列表，每个问题都有一个单选按钮组。我尝试过这样的事情：

var countRows = 0;
$.each(questionList, function (index, value) {
    var btnName = 'Button' + countRows.toString();
    $("input[name="+btnName+"]").live("change", function () {
        radioValue[countRows] = $(this).val();
    });
    countRows++;
});

然而，这让我在填充我的“radioValue＆＃39;数组，因为它只填写一个完全错误的索引上的一个值，该索引甚至不存在。

这是我的HTML：

    <div class="content" id="IndexCompletion">
<h2>Erfassen der Leistung für Mitarbeiter: @Model.Mitarbeiter.Vorname @Model.Mitarbeiter.Nachname</h2>

<div class="dataTableSurrounding">
    <table id="surveyTable">
        <thead>
            <th>Frage</th>
            @foreach (var answerOption in Model.Survey.Questions.FirstOrDefault().AnswerOptions)
            {
                <th>@answerOption.Description</th>
            }
        </thead>
        <tbody class="dynamicTryOut">
        </tbody>
    </table>
</div>

<br />
<br />
<div>
    <input type="button" id="saveSurvey" value="Senden">
</div>

这是脚本部分：

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    @section scripts{
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
    var val1, val2;

    var questionList = JSON.parse(JSON.stringify(@Html.Raw(Model.JsonStringQuestions)));
    var answerOptionList = JSON.parse(JSON.stringify(@Html.Raw(Model.JsonStringAnswerOptions)));
    var radioValue = [];

    $(document).ready(function() {
        var table = $('#surveyTable').DataTable({
            "processing": true,
            "serverSide": true,
            "filter": false,
            "orderMulti": false,
            "ajax": {
                "url": '@Url.Action("LoadSurvey", "Home")',
                "type": "POST",
                "datatype": "json"
            },
            "columns": [{ "data": "Text", "name": "Text", "autoWidth": true },
                {
                    "render": function(data, type, full, meta) {
                        return '<input type="radio" class="questionButton" name="Button' + meta.row + '" value="1">';
                    }
                },
                {
                    "render": function(data, type, full, meta) {
                        return '<input type="radio" class="questionButton" name="Button' + meta.row + '" value="2">';
                    }
                },
                {
                    "render": function(data, type, full, meta) {
                        return '<input type="radio" class="questionButton" name="Button' + meta.row + '" value="3">';
                    }
                },
                {
                    "render": function(data, type, full, meta) {
                        return '<input type="radio" class="questionButton" name="Button' + meta.row + '" value="4">';
                    }
                },
                {
                    "render": function(data, type, full, meta) {
                        return '<input type="radio" class="questionButton" name="Button' + meta.row + '" value="5">';
                    }
                }],
            "language": {
                "info": "Seite _PAGE_ von _PAGES_",
                "infoEmpty": "Keine Einträge verfügbar",
                "lengthMenu": "_MENU_ Einträge pro Seite",
                "zeroRecords": "Keine Einträge gefunden",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "processing": "Lade Formular",
                "paginate": {
                    "next": "Weiter",
                    "previous": "Zurück"
                }
            }
        });

        $("#saveSurvey").click(function() {
            $('<form action=@Url.Action("SaveSurvey") method="POST">' +
                '<input type="hidden" name="surveyId" value="' + @Model.Survey.Id + '">' +
                '<input type="hidden" name="val1" value="' + val1 + '">' +
                '<input type="hidden" name="val2" value="' + val2 + '">' +
                '</form>').submit();
        });

        var counters = 0;
        $.each(questionList, function (index, value) {
            $('input[name="Button' + counters + '"]').on('change', function () {
                alert("worked");
                radioValue[counters] = $(this).val();
            });
            counters++;
        });
    });
</script>
    }

任何想法可能是什么问题？

Answer 1

我通过在for循环中调用用户定义的函数来修复奇怪的计数行为：

        for (var i = 0; i < questionArr.length; i++) {
            attachChangeEvent(i);
        } 


        function attachChangeEvent(index) {
            $('input[name="Button' + index + '"]').live('change', function () {
                radioValue[index] = $(this).val();
            });
        }

似乎引入计数器并使用$ .each（）循环会产生不必要的行为。拆分计数和添加事件可以解决这个问题。

但我仍然无法让.on()工作。

感谢您的想法。

添加＆＃39;已更改＆＃39;每个Radio Btn的活动

1 个答案: