javascript - 动态创建的 html 链接不起作用

Question

创建一批Html节点后，链接失效了！

我该如何解决？

Javascript代码：

   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_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' 

我希望在单击我动态创建的标签后触发此事件。但它不起作用！

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

标签： javascriptjqueryhtml

Answer 1

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>

它工作正常:)