JQuery on() does not fire on appended element

Question

My event handler on a child element that is appended to parent is not invoked. Event handler on parent is invoked.

componentDidMount() {

  $(document).ready(()=> {

    $(".parent").on("click", ".child", (e) => {
      e.preventDefault();
      $(this).parent('div').doStuff();
    });

    $(".parent").click(function(e) {
      console.log("this is working");
      $(".parent").append('<div><a href="#" className="child">Do Stuff</a></div>'); 
    });

  }
}

Answer 1

Problem was that i was using className which is React specific way to refer to HTML element's class attribute. When I made this update, it worked.

$(".parent").append('<div><a href="#" class="child">Do Stuff</a></div>');