Jquery Appended Content - Not Clickable

Question

I have the following JQ. It's basically adding a little icon that will allow for some inline editing when a list item is selected. However, I am unable to work with the jquery added content. I cant even log anything to console when I click my JQ added content. Is there something wrong with my code below?

I can not add a fiddle, because I dont have a link to the Kendo UI libraries, that this list is using.

  <script>
                $(function () {
                    $("#treeview-left li").click(function () {
                            $("div#EditEntity").remove();
                            $(this).find(".k-state-focused").append("<div id='EditEntity'>&nbsp;&nbsp;<a href='#' id='EditWindow'  class='icon-pencil active tiny'></a></div>");
                    });
                    $(".k-state-selected").on("click", "a#EditWindow", function (e) {
                        e.preventDefault();
                        $.get("ClassificationEditEntity", function (data) {
                            $(".k-window-content").html(data);
                        });
                    });
                });

            </script>

Answer 1

you need delegated event as html is dynamically added after DOM load:

$(".k-state-focused").on("click", "a#EditWindow", function (e) {
  console.log("Asdf");
  $.get("ClassificationEditEntity", function(data) {
    $(".k-window-content").html(data);
  });
});

or:

$(document).on("click", "a#EditWindow", function (e) {
      console.log("Asdf");
      $.get("ClassificationEditEntity", function(data) {
        $(".k-window-content").html(data);
      });
    });

See HERE at the last of the page details of delegated events.