CODEWITHSUNDEEP
javascriptjqueryhtmleventsdouble-click
keewee279
keewee279

Reputation: 1654

jQuery: Triggering event on dblclick not working (but working on keyup etc.)

I am new to JS / jQuery and use the following snippet in my document ready to call a function on keyup on TDs with a certain class: 

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

The function calculates some data based on inputs in the table and then updates cells with the results of the calculations. The table is a standard HTML table with a large number of dynamically added rows and TDs and all editable TDs contain a contenteditable div where users can enter numbers.

So far everything works as intended but for some reason I cannot call the same function on double click.

I tried using 'dblclick keyup' instead of 'keyup' and also tried copying the whole snippet and replacing keyup by dblclick there but both don't trigger the function on double click.

I do have another event on double click that is initiated separately and clears the div's content on double click but shouldn't I be able to call two separate events on this ?

Example TD: 

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

Many thanks for any help with this, Mike

Upvotes: 0

Views: 3770

Answers (2)

Mike
Mike

Reputation: 894

You have options here...

It seems you may have tried to overload the event bind, that won't work.

DOES NOT WORK

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

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

DOES WORK

$(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*/ });

OR

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

ALSO

Assumably your events all want to fire the same process/method/procedure...

Then you would do this:

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

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

OR

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

OR

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

Upvotes: 3

Ricky Nelson
Ricky Nelson

Reputation: 876

This worked for me:

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

Here is a working codepen: http://codepen.io/socketwiz/pen/OVQdqK?

Upvotes: 0

Related Questions