各無線Btnの「変更」イベントを追加します

Question

jQuery DataTable内に配置されたRadioButtonにイベントハンドラを追加しようとしています。

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

ボタン名は、各DataTable行に対して動的に生成されます。質問リストがあり、質問ごとにラジオボタングループがあります。しかし、これは私にそれも存在してはいけません完全に間違ってインデックスに一つの値だけを記入すると、私の「radioValue」配列を埋めるで奇妙な振る舞いを与える

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

：私はこのような何かを試してみました。

これは私の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を使用して（）ループが不要な振る舞いを作成するようです。カウントを分割してイベントを追加すると、この問題は解決されます。

しかし、私はstilは.on()を動作させることができませんでした。あなたのアイデアを

感謝。