Dynamically added HTML content event is not fired

Question

I have a search product page in my application. I use a jQuery ajax function for databind product list. There is a compare checkbox in each item in product list.

Please see my Product list html below.

Rendered Html

    <div id="productsContainer">
                            <div class="product_list1">
                                <div class="product_image">
                                    <img src="http://www.barco.com/~/media/Images/Products/2011/3D%20display%20management/XDS-150%20%20200%20%20400.jpg">
                                </div>
                                <div class="product_desc">
                                    <h1>TransForm XDS-1100</h1>
                                    <p>Universal and scalable collaboration solution for a 3D stereo display</p>
                                    <div class="add_compare">
                                        <input id="test" 0'="" _id="55a7624778a72623f843d778" cmp="compare" type="checkbox">
                                        <label for="test" 0'="">Add to compare</label>
                                        <div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="product_list1">
                                <div class="product_image">
                                    <img src="http://www.barco.com/~/media/Images/Products/Q%20-%20T/TransForm%20N/Transform%20N01NGP324jpgnewer2jpg.jpg">
                                </div>
                                <div class="product_desc">
                                    <h1>TransForm ECU-110</h1>
                                    <p>Preconfigured and easy to use high-res video wall controller</p>
                                    <div class="add_compare">
                                        <input id="test" 0'="" _id="55a75eac78a72623f843d76f" cmp="compare" type="checkbox">
                                        <label for="test" 0'="">Add to compare</label>
                                        <div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>

                            <div class="clear"></div>
                        </div>

Script

$("#productsContainer .product_list1 .product_desc .add_compare").on("click", "input:checkbox", function () {

    alert('message ');

});

Edit

Html in initial stage

 <div id="productsContainer">

 </div>

Json Result

    public JsonResult GetSearchedProducts(SearchProductModel model)
    {
        _productHelper = new ProductHelper();

        var data = _productHelper.GetSearchedProducts(model);

        StringBuilder strbld = new StringBuilder();

        int i = 0;

        foreach (var item in data)
        {

            strbld.Append("<div class=\"product_list1\">");
            strbld.Append(" <div class=\"product_image\"><img src=" + item.Picturepath + " /></div>");
            strbld.Append(" <div class=\"product_desc\">");
            strbld.Append("     <h1>" + item.Name + "</h1>");
            strbld.Append("     <p>" + item.Shortdesc + "</p>");

            strbld.Append("     <div class=\"add_compare\">");
            strbld.Append("         <input id='test'" + i + "' _id=" + item._id.ToString() + "  cmp='compare' type=\"checkbox\"/>");
            strbld.Append("         <label for='test'" + i + "'>Add to compare</label>");
            strbld.Append("         <div>");

            strbld.Append("         </div>");
            strbld.Append("         <div class=\"clear\"></div>");
            strbld.Append("     </div>");

            strbld.Append(" </div>");
            strbld.Append(" <div class=\"clear\"></div>");
            strbld.Append(" </div>");

        }

        strbld.Append("<div class=\"clear\"></div>");

        return Json(strbld.ToString(), JsonRequestBehavior.AllowGet);
    }

When I click the checkbox, it's not fired. How can I fix this?