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

来源

2017-07-15 rpivovar

我认为有很多与此有关的问题。尝试'现场'或代表团 –

这？ http://api.jquery.com/live/ – rpivovar

或者，也许呢？ http://api.jquery.com/on/ – rpivovar

您需要使用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()，因为它已过时。

来源

2017-07-15 16:15:39

太棒了。并感谢链接到jQuery页面。 – rpivovar

@coffeebot高兴地帮助你:)） –

'on（）'的第二个参数可以是'$ this'或类似的东西吗？像'$（document）.on（'click'，$（this），function（）{' - 我在说的是，不是给出元素的id，而只是说你这个元素只需点击？ – rpivovar

的Javascript添加动态HTML元素

回答

相关问题