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事件處理，順序和合適的去除

回答

相關問題