的Javascript添加动态HTML元素
问题描述:
我与代码this Stack Overflow answer工作,这副本的img
的alt
属性点击时和粘贴属性为textarea
被点击textarea
当使用时不点火。的Javascript添加动态HTML元素
该代码在加载页面加载的静态textarea
上效果很好,但我希望能够动态添加textarea
。我在HTML的顶部有一个按钮,它调用一个加载新的textarea
的函数。该功能位于<script>
的最底部。
我无法点击粘贴alt
属性到动态添加的textarea
。我猜这与代码有关,如document.getElementById(areaId);
可能只在页面加载时调用?我怎样才能使这种行为绑定到动态创建的元素?我应该看什么?
<html>
<body>
<!--dynamically add a text area-->
<button onclick="addImage()" style="cursor: pointer; position: absolute; top: 35px; left: 450px;">Add Image</button>
<img src="smiley1.png" alt="{smiley001}" style="cursor: pointer;">
<img src="smiley2.png" alt="{smiley002}" style="cursor: pointer;">
<img src="smiley3.png" alt="{smiley003}" style="cursor: pointer;">
<img src="smiley4.png" alt="{smiley004}" style="cursor: pointer;">
<img src="smiley5.png" alt="{smiley005}" style="cursor: pointer;">
<br>
<!--static textarea - this one works-->
<textarea id="imageText" cols="50" rows="10"></textarea>
</body>
</html>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
selected = '';
$('img').click(function(){
console.log($(this).attr('alt'));
selected = $(this).attr('alt');
});
$('#imageText').click(function(){
insertAtCaret('imageText',selected)
// Clear the selection so it isn't copied repeatedly
selected = '';
});
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
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;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
//add dynamic textarea - this does not take the alt attribute
function addImage() {
$("body").append('<div style="margin-bottom: 5px;"><textarea id="imageText" name="items[][image]" cols="25" rows="1" placeholder="Enter Image Here..."></textarea><button class="remove" style="margin-left: 5px;">Remove</button></div>');
}
</script>
答
您需要使用event delegation concept象下面这样: -
$(document).on('click','img',function(){
console.log($(this).attr('alt'));
selected = $(this).attr('alt');
});
$(document).on('click','#imageText',function(){
insertAtCaret('imageText',selected)
// Clear the selection so it isn't copied repeatedly
selected = '';
});
注: - 不要使用live()
,因为它已过时。
我认为有很多与此有关的问题。尝试'现场'或代表团 –
这? http://api.jquery.com/live/ – rpivovar
或者,也许呢? http://api.jquery.com/on/ – rpivovar