jQuery: Triggering event on dblclick не работает (но работает на keyup и т. Д.)

Question

Я новичок в JS/jQuery и использую следующий фрагмент в моем документе, готовый к , вызов функции на клавиатуре на TDs с определенным классом:

$(document).on('keyup', '.calcInOut, .calcBalance', calculateSumsKPR); 

Функция вычисляет некоторые данные на основе входов в таблице, а затем обновляет ячейки с результатами вычислений. Таблица представляет собой стандартную HTML-таблицу с большим количеством динамически добавленных строк и TD, а все редактируемые TDs содержат контент-контент, где пользователи могут вводить числа.

До сих пор все работает по назначению, но по какой-то причине я не могу назвать ту же функцию при двойном щелчке.

Я попытался с помощью 'dblclick keyup' вместо 'keyup', а также пытался скопировать весь фрагмент и заменяя keyup на dblclick там, но и не вызвать функцию на двойной щелчок.

У меня есть другое событие при двойном щелчке, которое инициируется отдельно и очищает содержимое div двойным щелчком, но не должен ли я называть два отдельных события на этом?

Пример TD:

<td class="calcInOut editable"><div contenteditable="true"></div></td> 

Большое спасибо за любую помощь в этом, Майк

Answer 1

У вас есть варианты здесь ...

Кажется, вы, возможно, пытались перегрузить привязку события, которые не будут работать.

НЕ РАБОТАЕТ

$(object).on("click dblclick keyup", function() { /*do stuff*/ }) 

$(object).bind("click dblclick keyup", function() { /*do stuff*/ }) 

ДЕЛАЕТ РАБОТА

$(object).on("click", function() { /*do stuff*/ }).on("dblclick", function() { /*do stuff*/ }).on("keyup", function() { /*do stuff*/ }); 

$(object).bind("click", function() { /*do stuff*/ }).on("dblclick", function() { /*do stuff*/ }).on("keyup", function() { /*do stuff*/ }); 

ИЛИ

$(object).click(function() { /*do stuff*/ }).dblclick(function() { /*do stuff*/ }).keyup(function() { /*do stuff*/ }); 

ТАКЖЕ

Предположительно, ваши события все хотят запустить тот же процесс/метод/процедуру ...

Тогда вы могли бы сделать это:

function doStuff() { 
/*do stuff*/ 
} 

$(object).on("click", doStuff).on("dblclick", doStuff).on("keyup", doStuff); 

ИЛИ

$(object).bind("click", doStuff).on("dblclick", doStuff).on("keyup", doStuff); 

ИЛИ

$(object).click(doStuff).dblclick(doStuff).keyup(doStuff); 

Answer 2

Это работает для меня:

$(".js-double-click").dblclick(function() { 
    alert("Handler for .dblclick() called."); 
}); 

Вот рабочий codepen: http://codepen.io/socketwiz/pen/OVQdqK?