I create some dynamically generated html by jQuery and then add some click event on this generated html.
The click event work fine and the code inside run correctly and add some anther dynamically generated html to the first dynamically generated html on the page.
So what I am trying to do is first dynamically generated html then add click event on it after the click event is triggered, add some more dynamically generated html to the fist dynamically generated html.
This all works fine but the second dynamically generated html not displaying on the screen, I inspect element on the target html and the html was generated but still not displayed on the screen.
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" data-id="' + data[sub].CategoryID + '">'
+ '<a class="dropdown-tree-a">' + data[sub].CategoryName + ' COLLECTION </a>'
+ '<ul class="category-level-2 dropdown-menu-tree" id="category">'
+ '</ul>'
+ '</li>'
console.log(html);
$Category.append(html);
}
}).error(function () {
console.log('error');
});
//___________________________________________________________________________
$(document).on('click', 'li.CategorySelected', function () {
console.log("clickd");
// Get the id from the link
var SelectedCategoryID = $(this).attr("data-id");
console.log(SelectedCategoryID);
if (SelectedCategoryID != '') {
console.log('1');
$CategorySelected = $('#category');
console.log($CategorySelected);
console.log('2');
$CategorySelected.empty();
console.log('3');
console.log("CategorySelected empty");
console.log('4');
var html = '';
console.log('5');
$.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
function (data) {
console.log(data);
console.log('6');
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);
console.log($CategorySelected);
}
});
}
});
//_________________________________________________________
});
