Javascript Not firing when used with Dynamically-added HTML element

Question

I'm working with code from this Stack Overflow answer, which copies the alt attribute of an img when clicked and pastes the attribute into a textarea when the textarea is clicked.

The code works great on a static textarea that is loaded in on page load, but I'd like to be able to dynamically add in the textarea. I have a button at the top of the HTML that calls a function that loads in a new textarea. The function is at the very bottom of the <script>.

I'm unable to click-paste the alt attribute into the dynamically added textarea. I'm guessing this has something to do with code like document.getElementById(areaId); that maybe is only called when the page loads? How can I make this behavior bind to dynamically-created elements? What should I look into?

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

I think there are a lot of question related to this. try `live` or delegation — Koushik Chatterjee, Jul 15 '17 at 16:11
The page for live() says it's deprecated, so maybe I should look into on/delegation — rpivovar, Jul 15 '17 at 16:15
@KoushikChatterjee don't suggest live() it has been deprecated for many years — charlietfl, Jul 15 '17 at 16:15

score 2 · Accepted Answer · answered Jul 15 '17 at 16:15

2

You need to use event delegation concept like below:-

$(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 = '';
});

Note:- don't use live(),because it's deprecated.

answered Jul 15 '17 at 16:15

Alive to die - Anant

70,531
10
51
98

Awesome. And thanks for the link to the jQuery page. – rpivovar Jul 15 '17 at 16:22
@coffeebot glad to help you :)) – Alive to die - Anant Jul 15 '17 at 16:25
Can the second argument of `on()` be `$this` or something like that? Like `$(document).on('click',$(this),function(){` - what I'm saying is, instead of giving the `id` of the element, can you just say this element that you just clicked? – rpivovar Jul 15 '17 at 16:53
1

no you can't. `$(this)` can be used inside function, but not as a second parameter. even normally also you can't do it when you are writing event functionality in jQuery – Alive to die - Anant Jul 15 '17 at 17:16

Javascript Not firing when used with Dynamically-added HTML element

1 Answers1