jsFiddle:http: //jsfiddle.net/fThMa/2/
在注释/渲染文本字段内单击,然后双击下面的 4 个 TD 中的任何一个,将适当的 HTML 实体插入注释/渲染文本字段,甚至删除突出显示的文本并插入到当前光标位置。
应该发生的是:单击注释,然后双击一个实体,然后再次双击一个实体。结果应该是 1 个实体插入到光标所在的注释文本字段中,并且进一步的双击事件停止。
问题是,如果有人在没有 dblclick 实体 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="&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="&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>