Question

Using this hotkeys plugin, https://github.com/jeresig/jquery.hotkeys, I’m having some problems with the following code:

jQuery( document ).ready( function( $ ) {

    function insert_tag(tag){
        $('#water_chemistry').val($('#water_chemistry').val()+' ['+tag+'] ');
    }

    $(document).bind('keydown', 'alt+ctrl+1', insert_tag("temp_min"));
    $(document).bind('keydown', 'alt+ctrl+2', insert_tag("temp_max"));
    $(document).bind('keydown', 'alt+ctrl+3', insert_tag("pH_min"));
    $(document).bind('keydown', 'alt+ctrl+4', insert_tag("pH_max"));
    $(document).bind('keydown', 'alt+ctrl+5', insert_tag("hardness_min"));
    $(document).bind('keydown', 'alt+ctrl+6', insert_tag("hardness_max"));
    $(document).bind('keydown', 'alt+ctrl+7', insert_tag("conductivity_min"));
    $(document).bind('keydown', 'alt+ctrl+8', insert_tag("conductivity_max"));

    $('a#temp_min').click(insert_tag("temp_min"));
    $('a#temp_max').click(insert_tag("temp_max"));
    $('a#pH_min').click(insert_tag("pH_min"));
    $('a#pH_max').click(insert_tag("pH_max"));
    $('a#hardness_min').click(insert_tag("hardness_min"));
    $('a#hardness_max').click(insert_tag("hardness_max"));
    $('a#conductivity_min').click(insert_tag("conductivity_min"));
    $('a#conductivity_max').click(insert_tag("conductivity_max"));

});

If I refresh the page, all of the tags are inserted into the textarea.

I’m presuming I’ve messed my syntax up, but I’m not sure how!

Thanks in advance.

Answer 1

First off:

$('a#hardness_max').click(insert_tag("hardness_max")); 
// is equivalent to:
var tmp = insert_tag("hardness_max");
$('a#hardness_max').click(tmp); // this calls the click handler with the result of the insert_tag function

What you probably wanted was:

$('a#hardness_max').click(function() { insert_tag("hardness_max"); }); 
// This function registers the click callback

As for the ctr+alt+1, it is the same case, but I would also add the textbox so they can do the shortcut in the textbox:

$(document).add('#water_chemistry').bind('keydown', 'alt+ctrl+1', function() { insert_tag("temp_min"); });

---

So the final result is:

jQuery( document ).ready( function( $ ) {

    function insert_tag(tag){
        $('#water_chemistry').val($('#water_chemistry').val()+' ['+tag+'] ');
    }

    var docAndTextarea = $(document).add('#water_chemistry');

    docAndTextarea.bind('keydown', 'alt+ctrl+1', function() { insert_tag("temp_min"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+2', function() { insert_tag("temp_max"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+3', function() { insert_tag("pH_min"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+4', function() { insert_tag("pH_max"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+5', function() { insert_tag("hardness_min"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+6', function() { insert_tag("hardness_max"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+7', function() { insert_tag("conductivity_min"); });
    docAndTextarea.bind('keydown', 'alt+ctrl+8', function() { insert_tag("conductivity_max"); });

    $('a#temp_min').click(function() { insert_tag("temp_min"); });
    $('a#temp_max').click(function() { insert_tag("temp_max"); });
    $('a#pH_min').click(function() { insert_tag("pH_min"); });
    $('a#pH_max').click(function() { insert_tag("pH_max"); });
    $('a#hardness_min').click(function() { insert_tag("hardness_min"); });
    $('a#hardness_max').click(function() { insert_tag("hardness_max"); });
    $('a#conductivity_min').click(function() { insert_tag("conductivity_min"); });
    $('a#conductivity_max').click(function() { insert_tag("conductivity_max"); });

});

---

And here is the jsFiddle:

FIDDLE!