dynamically Created html link does not work

Question

After creating a batch of Html nodes, The link does not work!

How can I fix it?

Javascript Codes:

   var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
                    '<a class="pr-0" href = "#" >' +
                    '<img class="mr-3" src="/images/comment1.png" alt="x">' +
                    '</a>' +
                    '<div class="media-body w-100">' +
                    '<h5 class="mt-0 mb-1">User</h5>' +
                    '<div id="collapse_0000" class="">' +
                    '<div id="cardId_0000" class="card">' +
                    '<p>TEST TEST</p>' +
                    '</div>' +
                    '<div class="comment-meta" id="commentId_0000">' +
                    '<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
                    '<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
                    '<span>' +
                    '<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
                    '</span>' +
                    '<div id="replyComment_0000" class="collapse"></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
                $(collapseId).append(nnn);

Exactly this line of code:

'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>'

I expect this event to fire after clicking the tag that I have created dynamically. But it doesn't work!

$("a[id^='replyC_']").on("click", function (event) {
    var nodeId = event.target.id;
});

Hi, please include a minimum working code in a snippet so that we could run it — Pierre, Apr 04 '20 at 15:11
Are you setting the event handler up BEFORE you dynamically create the new HTML? — Scott Marcus, Apr 04 '20 at 15:14

score 0 · Accepted Answer · answered Apr 04 '20 at 15:16

var collapseId = document.getElementById('collapseId')
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
    '<a class="pr-0" href = "#" >' +
    '<img class="mr-3" src="/images/comment1.png" alt="x">' +
    '</a>' +
    '<div class="media-body w-100">' +
    '<h5 class="mt-0 mb-1">User</h5>' +
    '<div id="collapse_0000" class="">' +
    '<div id="cardId_0000" class="card">' +
    '<p>TEST TEST</p>' +
    '</div>' +
    '<div class="comment-meta" id="commentId_0000">' +
    '<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
    '<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
    '<span>' +
    '<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
    '</span>' +
    '<div id="replyComment_0000" class="collapse"></div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>';
$(collapseId).append(nnn);

$("a[id^='replyC_']").on("click", function (event) {
    var nodeId = event.target.id;
    console.log(nodeId);
    
});

<div id="collapseId"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

it works fine :)

you Know the joke :D it works on my machine ༼ つ ◕_◕ ༽つ — Nadim Al Abdou, Apr 04 '20 at 15:22
you can test anthor version of jquery or write it in js , or test the code on codepen i think the code is correct . — Nadim Al Abdou, Apr 04 '20 at 15:23
This is the solution:I must add $(document) and then event with its parameters. $(document).on( eventName, selector, function(){} ); — x19, Apr 04 '20 at 16:10

dynamically Created html link does not work

1 Answers1