Question

jsFiddle: http://jsfiddle.net/fThMa/2/

Clicking inside the note / rend text fields and then double clicking any of the 4 TDs below inserts into the note / rend textfields appropriate HTML entities, even removing highlighted text and inserting at the current cursor position.

What should happen is: Click in note, then double click an entity, then double click an entity again. The result should be one entity inserted into the note text field where the cursor was and further double click events stop.

The problem is, if someone clicks outside the note / rend text fields without dblclicking an entity TD, then that dblclick event handler is never removed. Only until they double click an entity and have that entity inserted is the dblclick event handler removed.

Another bug is, every time note / rend is given focus, a new event handler is created and attached, so that if I click note / rend several times and then double click an entity, that entity is inserted for each time I originally clicked on note / rend.

What would be the best way to get this to only fire once and only create a single event handler?

Moving the .off outside the .on removes the .on as soon as it is set, never letting the function in .on to run.

(function ($, undefined) {
        $.fn.getText = function() {
            var elem = $(this).get(0);
            var posStart = 0;
            
            if('selectionStart' in elem) {
                if (elem.selectionStart > elem.selectionEnd) {
                    posEnd = elem.selectionStart;
                    posStart = elem.selectionEnd;
                } else {
                    posEnd = elem.selectionEnd;
                    posStart = elem.selectionStart;
                }
                if (posStart != posEnd) {
                    $(elem).val($(elem).val().substring(0, posStart) + $(elem).val().substring(posEnd));
                }
            }
            return posStart;
        }
    })(jQuery);
        
    $(document).ready(function() {
        $("#attributes table tr td").on("blur", "input", function(event) {
            var elem = $(this);
            $("#entities table").one("dblclick", "tr", function(event) {
                var cursorPos = $(elem).getText();
                var entity = $(this).children(":first").children(":first").val();
                var beg = $(elem).val().substring(0, cursorPos);
                var end = $(elem).val().substring(cursorPos);
                $(elem).val(beg + entity + end);
                $("#entities table").off("dblclick", "tr");
            });
        });
    });​

<div id="attributes">
  <table>
    <form>
      <tr>
        <td><p>note</p></td>
        <td><input id="note" name="note" type="text" value="note"></td>
      </tr>
    </form>
    <form>
      <tr>
        <td><p>rend</p></td>
        <td><input id="rent" name="rend" type="text" value="rend"></td>
      </tr>
    </form>
  </table>
</div>
<div id="entities">
  <table>
    <form>
      <tr>
        <td><input id="ent1-val" hidden="true" type="text" value="&amp;lt;"></td>
        <td><input id="ent1-vis" type="text" value="<"></td>
        <td><input id="ent1-name" type="text" value="Less Than"></td>
      </tr>
    </form>
    <form>
      <tr>
        <td><input id="ent2-val" hidden="true" type="text" value="&amp;gt;"></td>
        <td><input id="ent2-vis" type="text" value=">"></td>
        <td><input id="ent2-name" type="text" value="Greater Than"></td>
      <tr>
    </form>
  </table>
</div>​

Answer 1

I would suggest unbinding the event when the event that binds it gets triggered, preventing the doubleclick event from being bound twice. You may also want to unbind it after n seconds, or possibly after clicking elsewhere on the page.

$("#entities table").off("dblclick","tr")
                    .on("dblclick", "tr",
                           function() {
                               //do stuff 
                           });