Selectors ignoring Ajax / Jquery loaded content

Question

I'm working with a static json file. I'm using jquery to load my file into my store.

Everything loads fine.

At the side of my store, I have a categories menu, where I can filter my store items.

Because my store is items are dynamically generated, I dont seem to be able to select them with jquery. Here is the ajax request:

<script>
            $(function () {
                var actionUrl = '@Url.Action("Items", "Home")';
                $.getJSON(actionUrl, displayData);

                function displayData(response) {
                    if (response != null) {
                        for (var i = 0; i < response.length; i++) {
                            $("#store").append("<div class='storeItem' data-price=" + response[i].PriceScale + " data-category=" + response[i].Cat + "> <img src='#" + response[i].Cat + "' class='itemImage' alt='" + response[i].Title + "'/><span class='itemTitle'>" + response[i].Title + "</span><span class='itemDesc'><p>" + response[i].Desc + "</p></span><span class='itemPrice'>"+ response[i].Price +"</span><a href='#' class='add2cart'>ADD TO CART</a>")
                        }
                    }
                    else {
                        $("#store").append("<h5>There was a problem loading the store content.</h5>");
                    }
                }
            });
        </script>

Here is the code I have tride:

 <script>
        $(function () {
            $( "nav#catagories ul li input").on("click", function () {
                var a = $(this).prop("checked");
                var b = $(this).attr("id");
                if (a == true) {
                    $("div.storeItem").hide();
                    $(".storeItem").data("category", b).show();
                }
            });
        });
    </script>

I've also tried:

<script>
        $(function () {
            $(document).on("click","nav#catagories ul li input", function () {
                var a = $(this).prop("checked");
                var b = $(this).attr("id");
                if (a == true) {
                    $("div.storeItem").hide();
                    $(".storeItem").data("category", b).show();
                }
            });
        });
    </script>

In both cases the script works up untill the div.storeItem hide.

Here is the HTML that is outputed:

<div class="storeItem" data-price="med" data-category="apparel"> 
   <img src="#apparel" class="itemImage" alt="Shirt">
          <span class="itemTitle">Shirt</span>
          <span class="itemDesc">
                   <p>A Beatiful Shirt</p>
          </span>
          <span class="itemPrice">23.45</span>
          <a href="#" class="add2cart">ADD TO CART</a>
   </div>

Answer 1

Maybe your problem doesn't have to do anything with items being dynamically generated. Here $(".storeItem").data("category", b).show(); you are replacing category value with value stored in b , while it seems you want to select those which has category equal to b.

Maybe this will work or at least give you the direction:

   $(function () {
        $(document).on("click", "nav#catagories ul li input", function () {
            var checked = $(this).prop("checked");
            var category = $(this).attr("id");
            if (checked) {
                $(".storeItem").hide()
                               .filter(function () {
                    return $(this).data("category") === category;
                }).show();
            }
        });
    });