イベントアクション

Question

とのDataTableのドロップダウンを作成します。私はこのような一つの列を持つテーブルがある：

{ 
       "render": function(d,t,r){ 
        var $select = $("<select></select>", { 
         "id": r[0]+"start", 
         "value": d 
        }); 
        $.each(statuslist, function (Value, Text) { 
         var opt = '<option value=' + Text.Value + '>' + Text.Text + '</option>'; 
         if (Text.Text === r[3]){ 
          $(opt).prop("selected", true); 
         } 
         $select.append(opt); 
        }); 
        $select.attr("id", "opt" + r[0]); 
        $("#opt" + r[0]).on('change', function(){ 
         SetStatus(r[0]); 
        }); 
        return $select.prop("outerHTML"); 
       } 
      }, 

statuslistは、4つのテキストと値のペアのリストです。 4番目の列は行のステータステキストです。その行を選択するようにしています。また、selectの値が変更されたときにイベントをキャプチャしようとしています。これは動作しません。何か案は？

Answer 1

夫婦問題

• あなたは間違っている要素（XXXstart対idXXX）にイベントハンドラをアタッチしているがあります。
• イベントハンドラを間違った場所に接続すると、renderコールバックを複数回呼び出すことができます。

イベントハンドラをテーブルの初期化コードから移動することをお勧めします。例えば

：

$('#example').DataTable({ 
    // ... skipped ... 
    columns: [ 
     // ... skipped ... 
     {    
     "render": function(data, type, full, meta){ 
      var $select = $('<select/>', { 'class': 'ctrl-status' }); 
      $.each(statuslist, function (Value, Text) { 
       var $opt = $('<option/>', { 'value': Text.Value, 'text': Text.Text }); 
       if (Text.Text === full[3]){ 
        $opt.attr("selected", "selected"); 
       } 
       $select.append($opt); 
      }); 
      return $select.prop("outerHTML"); 
     } 
     } 
    ] 
}); 

// Handle change event for status selection control 
$('#example').on('change', '.ctrl-status', function(){ 
    var data = $('#example').DataTable().row($(this).closest('tr')).data(); 
    SetStatus(data[0]); 
}); 

は、コードやデモンストレーションのためthis example参照してください。