Call function from element inserted from Javascript/Jquery

Question

I am trying to invoke a javascript function from some HTML code inserted by some other javascript code (see below).

$(".leave-a-note").click(function() {
            var id = $(this).closest('li').attr('id');
            $('#' + id).children('.write-comment-space').html("<a class='save-comment' href='#' onClick='insertComment();'>Save</a> <a href='#'>Cancel</a>");});

When I try to call a function from the ".save-comment" url nothing happens.

$(".save-comment").click(function() {
            console.log("test");
        });

However, if I leave the ".save-comment" URL directly in my HTML the function works. What am I doing wrong?

score -2 · Accepted Answer · answered May 15 '14 at 18:46

-2

use delegated event like this as html is generated after the DOM is loaded:

$(document).on("click",".save-comment",function() {
            console.log("test");
        });

answered May 15 '14 at 18:46

Ehsan Sajjad

61,834
16
105
160

Why this has been downvoted? Could use closest static container but anyway... – A. Wolff May 15 '14 at 18:50
1

Op did'nt showed much html content so i use document – Ehsan Sajjad May 15 '14 at 18:52

Call function from element inserted from Javascript/Jquery

1 Answers1