Не работает событие editable-save.bs.table для bootstrap-table

1,00
р.
Используется таблица из библиотеки bootstrap-table и её расширение table editable (оригинал: x-editable). Проблема заключается в том, что предложенные для использования события editable-init.bs.table и editable-save.bs.table либо не срабатывают, либо я что-то не так делаю. Конечная цель - сохранить значение в базу. Кто-нибудь сталикивался? Если да, то как вы работаете с указанными выше событиями?
Создание таблицы:
function createBootstrapTable(tab_wrapper_id, targetUrl) { $('#'+tab_wrapper_id).bootstrapTable({ method: 'get', url: targetUrl, cache: false, pagination: false, showRefresh: true, showFooter: true, editable: true, sidePagination: 'server', pageSize: 100, pageList: [10, 25, 50, 100] }) }
Событие:
$('#' + tab_wrapper_id).on('editable-save.bs.table', function() { $('.editable').on('save',function(e, params){ console.log(123) }) })

Ответ
Без полного примера сказать сложно. Скорее всего как вам и сказали:
вы ловите не там (неправильный элемент для прослушки событий, динамическая привязка или опечатка) вы ловите не то (опечатка в названии события)
Вот полностью работающий пример:
HTML
Here is the result of event.


JS
var data = [{ "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }, { "id": 3, "name": "Item 3", "price": "$3" }]
$(document).ready(function() { var $result = $('#eventsResult')
$('#eventsTable').on('all.bs.table', function(e, name, args) { console.log('Событие:', name, ', data:', args) }) .on('click-row.bs.table', function(e, row, $element) { $result.text('Событие: click-row.bs.table') }) .on('dbl-click-row.bs.table', function(e, row, $element) { $result.text('Событие: dbl-click-row.bs.table') }) .on('sort.bs.table', function(e, name, order) { $result.text('Событие: sort.bs.table') }) .on('check.bs.table', function(e, row) { $result.text('Событие: check.bs.table') }) .on('uncheck.bs.table', function(e, row) { $result.text('Событие: uncheck.bs.table') }) .on('check-all.bs.table', function(e) { $result.text('Событие: check-all.bs.table') }) .on('uncheck-all.bs.table', function(e) { $result.text('Событие: uncheck-all.bs.table') }) .on('load-success.bs.table', function(e, data) { $result.text('Событие: load-success.bs.table') }) .on('load-error.bs.table', function(e, status) { $result.text('Событие: load-error.bs.table') }) .on('column-switch.bs.table', function(e, field, checked) { $result.text('Событие: column-switch.bs.table') }) .on('page-change.bs.table', function(e, number, size) { $result.text('Событие: page-change.bs.table') }) .on('search.bs.table', function(e, text) { $result.text('Событие: search.bs.table') }) .on('editable-save.bs.table', function(editable, field, row, oldValue, $el) { $result.text('Событие: editable-save.bs.table') }) .on('editable-shown.bs.table', function(editable, field, row, $el) { $result.text('Событие: editable-shown.bs.table') }) .on('editable-hidden.bs.table', function(editable, field, row, oldValue, $el) { $result.text('Событие: editable-hidden.bs.table') }) .on('editable-init.bs.table', function() { $result.text('Событие: editable-init.bs.table') })
$('#eventsTable').bootstrapTable({ columns: [{ field: 'id', title: 'id' }, { field: 'name', title: 'name', editable: { type: 'text' } }, { field: 'price', title: 'price', editable: { type: 'text' } }], data: data })
})
Ссылка на песочницу: http://jsfiddle.net/pvkovalev/71m1yqz9/
Надеюсь это вам поможет. Удачи. 🙂