我遇到了一个看似简单但令人费解的javascript问题。这里有两个片段:两者几乎相同,除了后一个代码段的黄色输入框由Javascript生成。
这两个代码之间的区别是:
<table><tbody><tr class="newdiv"><td style="background:yellow">enter</td></tr></tbody></table> click the yellow box!
<br><textarea id="result"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// the script below enables typing 'enter' into textarea by clicking the yellow box.
$('.newdiv>td').click(function(){
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
insertAtCaret('result', sel);return false;
});
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
if (!txtarea) {
return;
}
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false));
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart('character', -txtarea.value.length);
strPos = range.text.length;
} else if (br == "ff") {
strPos = txtarea.selectionStart;
}
var front = (txtarea.value).substring(0, strPos);
var back = (txtarea.value).substring(strPos, txtarea.value.length);
txtarea.value = front + text + back;
strPos = strPos + text.length;
txtarea.scrollTop = scrollPos;
}
</script>
<button onclick="myfunction()">show</button>
<div id="show"></div>
<br><textarea class="txta" id="result"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function myfunction(){
document.getElementById('show').innerHTML = `
<table><tbody><tr class="newdiv"><td style="background:yellow">enter</td></tr></tbody></table> click the yellow box!
`;
}
// the script below enables typing 'enter' into textarea by clicking the yellow box.
$('.newdiv>td').click(function(){
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
insertAtCaret('result', sel);return false;
});
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
if (!txtarea) {
return;
}
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false));
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart('character', -txtarea.value.length);
strPos = range.text.length;
} else if (br == "ff") {
strPos = txtarea.selectionStart;
}
var front = (txtarea.value).substring(0, strPos);
var back = (txtarea.value).substring(strPos, txtarea.value.length);
txtarea.value = front + text + back;
strPos = strPos + text.length;
txtarea.scrollTop = scrollPos;
}
</script>
第二个片段的黄色框由以下部分产生:
function myfunction(){
document.getElementById('show').innerHTML = `
<table><tbody><tr class="newdiv"><td style="background:yellow">enter</td></tr></tbody></table> click the yellow box!
`;
}
第二个片段通过javascript函数生成黄色框,并且键入enter
由jquery起作用。我的问题是:为什么函数在第一个代码段中起作用,而在第二个代码段中却不起作用,尽管它们之间的差异(以我的拙见)似乎并不影响功能本身?
请使用以下代码更改代码。
从
$('.newdiv>td').click(function(){
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
insertAtCaret('result', sel);return false;
});
至
$(document).on('click', '.newdiv>td', function(){
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
insertAtCaret('result', sel);return false;
});
<button onclick="myfunction()">show</button>
<div id="show"></div>
<br><textarea class="txta" id="result"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function myfunction(){
document.getElementById('show').innerHTML = `
<table><tbody><tr class="newdiv"><td style="background:yellow">enter</td></tr></tbody></table> click the yellow box!
`;
}
// the script below enables typing 'enter' into textarea by clicking the yellow box.
$(document).on('click', '.newdiv>td', function(){
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
insertAtCaret('result', sel);return false;
});
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
if (!txtarea) {
return;
}
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false));
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart('character', -txtarea.value.length);
strPos = range.text.length;
} else if (br == "ff") {
strPos = txtarea.selectionStart;
}
var front = (txtarea.value).substring(0, strPos);
var back = (txtarea.value).substring(strPos, txtarea.value.length);
txtarea.value = front + text + back;
strPos = strPos + text.length;
txtarea.scrollTop = scrollPos;
}
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句