#javascript #jquery #event-handling #jquery-events
#javascript #jquery #обработка событий #jquery-события
Вопрос:
Я пытаюсь добавить поиск по столбцам к некоторым столбцам в таблице (используя таблицы данных). Я добавляю поле ввода для поиска в каждую ячейку заголовка таблицы. Datatables делает так, что каждый раз, когда вы нажимаете на заголовок, он изменяет метод сортировки, поэтому я вставил .stopPropagation
прикрепленный к событию on click для поля ввода, чтобы не изменять сортировку по столбцу при нажатии на входную часть ячейки заголовка. Единственная проблема заключается в том, что .stopPropagation
работает и не выполняет сортировку, но при нажатии на поле ввода он не позволяет мне добавлять текст в поле. Я не уверен, что я делаю неправильно. Вот фрагмент кода (он помещен в код для создания каждой таблицы на нашем сайте):
var columnsearch = $(this).find('th');
columnsearch.each(function () {
var title = $(this).text();
$(this).append( '<input type="search" placeholder="Search ' title '" />' );
})
var textbox = $(this).find('input')
textbox.click(function (event) {
event.stopPropagation();
})
Комментарии:
1. Вы пытались использовать event.preventDefault(); ?
2. Да, пробовал, и это не сработало. событие. Функция preventDefault() должна только предотвращать действие команды по умолчанию, но не предотвращать пузырькование DOM, что мне и нужно
Ответ №1:
После некоторого изучения я выяснил, используя часть прослушивателей событий инспектора Chrome, и обнаружил, что функция, которую мы включили в таблицах данных, colReorder, используемая для перестановки столбцов, вмешивалась в функциональность поля ввода конфликтующим mousedown
событием. Я добавил:
textbox.mousedown(function(event){
event.stopPropagation();
})
для поиска по столбцу JS, и это устранило проблему.