0

i found some Answers on this question like in this link but it not working for me i don't know if i do some thing else wrong i'm trying to create some html when the page load then click on html element that has been create dynamically but the click event on the specific element don't work here is my code :

$(function () {

console.log("Category Page Script loaded");

$.post('/Category/GetCategories', {}).success(function (data) {
    console.log(data);

    $Category = $('ul#Category-filter');
    $Category.empty();
    console.log("coustom empty");
    var html = '';

    for (sub in data) {
        console.log(data[sub].CategoryID, data[sub].CategoryName);
        var html = '<li class="dropdown-tree CategorySelected">'
                   + '<a class="dropdown-tree-a"  data-id="' + data[sub].CategoryID + '">' + data[sub].CategoryName + ' COLLECTION </a>'
                   + '<ul class="category-level-2 dropdown-menu-tree" id="' + data[sub].CategoryID + '">'
                   + '</ul>'
                   + '</li>'
        console.log(html);
        $Category.append(html);
    }

}).error(function () {
    console.log('error');
});
//___________________________________________________________________________

$('li.CategorySelected').on('click', function () {

    console.log("clickd");

    // Get the id from the link
    var SelectedCategoryID = $(this).attr("data-id");

    $CategorySelected = $('ul#' + SelectedCategoryID);
    $CategorySelected.empty();

    console.log("CategorySelected empty");

    var html = '';

    if (SelectedCategoryID != '') {

        $.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
         function (data) {
             console.log(data);

             for (sub in data) {
                 console.log(data[sub].SubCategoryID, data[sub].SubCategoryName);

                 var html = '<li><a href="' + data[sub].SubCategoryID + '">' + data[sub].SubCategoryName + ' </a> </li>'

                 console.log(html);

                 $CategorySelected.append(html);
             }


         });
    }
});

//_________________________________________________________
});
Community
  • 1
  • 1
Fadi
  • 2,320
  • 8
  • 38
  • 77
  • 1
    As you stated, the answer is in that other question; `$('ul#Category-filter').on('click', 'li.CategorySelected', function() { ...` – Rory McCrossan Aug 10 '14 at 16:22

1 Answers1

2
$('ul#Category-filter').on('click', 'li.CategorySelected', function(){
    //your scripts here
});
MH2K9
  • 11,951
  • 7
  • 32
  • 49
  • thank u it work but can u kindly help me again i'm new in jquery it work and every thing fine but not displaying the generated html on the screen i inspect element and find the html was added but not displayed on the screen – Fadi Aug 10 '14 at 16:57
  • 1
    Note that you should not attach delegated events to the `document`. `live` used to do that, and it is the reason it was deprecated. You should use the closest static element, as per my comment above. – Rory McCrossan Aug 10 '14 at 17:15