Binding Jquery click onto injected html

Question

Sorry if this has been asked before but I have already spent some time searching the web and cannot find a solution.

I am using ASP.NET and JQuery.

Basically I return some HTML icons from server side to client side as they are automatically generated by an XML file. The icons have a class name of "Report".

My Jquery scripts no longer fire when I click my reports now that I bring them in using a Literal or label.

In the master page

// Load reports
    $(".CLIButton").click(
        function () {

            var Data = $(this).attr('path');

            Data = JSON.stringify({ "xmlFile": Data });

                $.ajax({

                    url: "ProcessReports.aspx/ReturnStyledPage",
                    data: Data,
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (mydata) {
                        $("#ReportContent").html(mydata.d);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("There has been an error in this Ajax call 'ProcessReports.aspx/ReturnStyledPage'");
                    },
                    async: false
                });
            }
    );

    $(".Report").click(
        function () {
            alert("hi");
        });

Aspx page used to create html

 [WebMethod]
    public static string ReturnStyledPage(string xmlFile)
    {
        // Build report page

        //Load XML
        XmlDocument document = new XmlDocument();
        // document.Load(Server.MapPath((string)Session["ReportsXML"]));
        document.Load(HostingEnvironment.MapPath("/Assets/XML/" + xmlFile.Replace("/","") + ".xml"));

        //Create Navigator
        XPathNavigator navigator = document.CreateNavigator();

        //Load XSLT
        XslCompiledTransform transformer = new XslCompiledTransform();
        transformer.Load(HostingEnvironment.MapPath("/Assets/XSLT/FormatReports.xslt"));

        //Transform XML Data
        StringWriter output = new StringWriter();
        transformer.Transform(navigator, null, output);

        return output.ToString();
    }

I have read about trying to bind a click event to the html I have returned using the literal but it does not work when I have tried.

Thank you

Answer 1

$('#ReportContent').on('click', '.Report', function () {
    alert("hi");
})

Answer 2

Delegate event at closest static container:

$("#ReportContent").on('click',".Report",
        function () {
            alert("hi");
        });