jQuery.html set formunu kullanarak gönder düğmesi

Question

Bootstrap tablosunu değiştirmek için form ayarlamaya çalışıyorum ve bunun için JQuery .html() yöntemini kullanıyorum. Jquery API Dokümantasyonundan adım adım ilerledim, ancak kaydetme düğmemin neden ateş etmediğini anlayamıyorum. Benim hatam nerede?

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

Sizin #newTable ile olay göndermek tablodur, oluşturamaz.

Olmalıdır: senin düğmesine kaydetmek için

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

Answer 2

Geçerli giriş tipi gönderilişi almıyor neden olan, 'gönder' 'butonu' olup.

Tablonuzun 104 numaralı satırında, 've şimdi bu gönderim olayı için JS/jQuery'yi ekleyin.