Verwenden von jQuery.html Formular mit Schaltfläche "Senden"

Question

Ich versuche, Formular zum Ändern der Bootstrap-Tabelle festlegen, und ich verwende JQuery .html() -Methode dafür. Ich habe Schritt für Schritt die Jquery-API-Dokumentation gelesen, kann aber nicht herausfinden, warum meine Speicherschaltfläche nicht ausgelöst wird. Wo ist mein Fehler?

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

Ihr einreichen Ereignis mit #newTable Tabelle ist, bilden nicht.

Es sollte sein:

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

Answer 2

Ihr aktueller Eingabetyp für die Schaltfläche speichern ist ‚Taste‘ und nicht ‚Senden‘, weshalb es nicht vorgelegt zu werden.

In Zeile 104 Ihrer table.js ersetzen Sie Ihre Und fügen Sie jetzt einfach die JS/jQuery für dieses Senden Ereignis.