jQuery的。对/ .off事件处理，顺序和合适的去除

的jsfiddle：http://jsfiddle.net/fThMa/2/jQuery的。对/ .off事件处理，顺序和合适的去除

点击内的音符/雷德文本字段，然后双击任何下面的插入物4个TD的到附注/撕裂textfields适当的HTML实体，甚至删除突出显示的文本并插入当前光标位置。

应该发生的事情是：单击注释，然后双击一个实体，然后再次双击一个实体。结果应该是1个实体插入到光标所在的笔记文本字段中，并且其他双击事件将停止。

问题是，如果有人在没有dblclicking实体TD的情况下点击注释/撕裂文本字段，那么该dblclick事件处理程序不会被删除。直到他们双击一个实体，然后插入该实体才删除了dblclick事件处理程序。

另一个问题是，每当note/rend被赋予焦点时，会创建并附加一个新的事件处理程序，这样，如果我点击note/rend几次然后双击一个实体，那么每次插入该实体我最初点击笔记/撕裂。

什么是最好的方式来得到这个只触发一次，只创建一个单一的事件处理程序？

将.off移到.on之外，一旦设置就立即删除.on，从不让函数运行.on。

(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>

来源

2012-10-17 Shawn

我可能并不孤单，我不明白你在问什么。你能否澄清你想要发生什么以及发生了什么？它似乎在谷歌浏览器中为我工作。我点击文本字段，双击下面的td之一，并且td的值在原始文本字段中结束。额外的双击无所作为。此外，'.off'在您上面发布的代码中是多余的，因为您使用了'.one' –

在重新阅读我的文章后，我发现我确实已经非常清楚我想要发生什么，而不是什么发生。 .one是一项测试......除了冗余外，第3段和第4段中提到的问题仍然存在。 – Shawn

我看到您的HTML问题（可能无关，但仍然是一个问题）。表节点只能拥有孩子的thead和tr节点。直接表单节点无效。这显然会严重影响您的代码需要格式化的方式。通过当前的表单节点，它们不会在所有浏览器中一致地工作。 –

我会建议解除事件绑定它的事件被触发，防止doubleclick事件被绑定两次。您可能还想在n秒后解除绑定，或者在点击页面上的其他位置后解除绑定。

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

来源

2012-10-18 18:49:19

jQuery的。对/ .off事件处理，顺序和合适的去除

回答

相关问题