submitボタンでjQuery.htmlフォームを設定する

Question

私はブートストラップテーブルを変更するためのフォームを設定しようとしており、そのためにJQueryの.html（）メソッドを使用しています。私はJquery API Documentationからステップバイステップを実行しましたが、なぜ保存ボタンが起動しないのかを知ることはできません。私のミスはどこですか？

this is my plunk

JS：

$(function() { 

    $("#button").click(function() { 
    $('#table').bootstrapTable('refreshOptions', { 
       data: data, 
       detailView: false, 
       filterControl: true, 
       columns: [ 
        { 
         field: 'name', 
         title: 'Name', 
         sortable: true, 
         editable: true, 
         filterControl: 'input' 
        }, { 
         field: 'stargazers_count', 
         title: 'Structure', 
         sortable: true, 
         editable: true, 
         filterControl: 'input' 
        }, { 
         field: 'forks_count', 
         title: 'Class', 
         sortable: true, 
         editable: true, 
         filterControl: 'input' 
        }, { 
         field: 'description', 
         title: 'Description', 
         sortable: true, 
         editable: true, 
         filterControl: 'input' 
        } 
       ] 
      }); 
    }); 


    $('#table').bootstrapTable({ 
     detailView: true, 
     formatNoMatches: function() { 
      return "This table is empty..."; 
     }, 

     onClickCell: function(field, value, row, $element) { 
         if (field == 'name') { 
          $element.parent('tr').find('>td>.detail-icon').click(); 
          // NOTE: needs index to call to expandRow 
          var $tr = $element.parent('tr'); 
          // NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery 
          var index = $("> tr", $('#table').find('> tbody')).index($tr); 
          $('#table').bootstrapTable('expandRow',index); 
         } 
        }, 
     onExpandRow: function(index, row, $detail) { 
     // console.log(row) 
     $detail.html('<table></table>').find('table').bootstrapTable({ 
     columns: [{ 
      field: 'id', 
      title: 'id' 
     }, { 
      field: 'status', 
      title: 'stat' 
     }, { 
      field: 'date', 
      title: 'date' 
     }], 
     data: row.children, 
     // Simple contextual, assumes all entries have further nesting 
     // Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags 
     }); 
} 
}); 
}); 

$(function() { 
    var $result = $('#form'); 

    $("#newTable").submit(function(event) { 
        alert("your changes has been saved"); 
       }); 
       $("form").on("submit", function(){ 
        alert("form has been submitted."); 
        return false; 
       }); 



    $('#table').on('click-row.bs.table', function (e, row, $element) { 

     $('.success').removeClass('success'); 
     $($element).addClass('success'); 
     function getSelectedRow() { 
      var index = $('#table').find('tr.success').data('index'); 
      return $('#table').bootstrapTable('getData')[index]; 
     } 
     $result.html(
      '<form action="">' + 
      '<table id="newTable" border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+ 
      '<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td>&nbsp;</td>' + '<td><input type="text" id="frm-name" name="frm-name" value="' + getSelectedRow().name + '"/></td>' + '</tr>' + 
      '<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td>&nbsp;</td>' + '<td><input type="text" id="frm-structure" name="frm-structure" value="' + getSelectedRow().stargazers_count + '"/></td>'+ '</tr>'+ 
      '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td>&nbsp;</td>' + '<td><input type="text" id="frm-class" name="frm-class" value="' + getSelectedRow().forks_count + '"/></td>'+ '</tr>'+ 
      '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td>&nbsp;</td>' + '<td><input type="text" id="frm-description" name="frm-description" value="' + getSelectedRow().description + '"/></td>'+ '</tr>'+ 
      '</h3>' + '<input style="float: right; margin-top: 20%; margin-right: 15px;" class="btn btn-default" type="button" id="btn-submit-form" value="Save" type="submit"/>' 
         + '</table>' + '</form> ' 

     ) 
    }); 
}); 

working plunk

Answer 1

あなた#newTableでイベントを提出するテーブルであり、形成しません。

は、それは次のようになります。あなたのボタンを救うため

$(document).on('submit', "#form form", function(event) { 
     alert("Your change has been saved"); 
    }); 

Answer 2

あなたの現在の入力タイプは、それが提出取得されていない理由である、「提出」「ボタン」で、ありません。

あなたのtable.jsの104行目はあなたの ''を置き換えます。そして、このsubmitイベントのJS/jQueryを追加するだけです。