Jquery not firing li click which ul list is dynamically filled

Question

The problem is that jQuery doesn't fire when ul li is clicked. When I fill ul as static there is no problem with firing. But if I fill ul list dynamically from the database with getJSON function li click not firing.List was filled but li click not firing. I need your help to understand what is the problem.

HTML:

<ul id=ulSemtMahalle class=ulList>
    <li><div class=divIlceHeader>Çukurova</div>
        <ul class=ulListSemt>
            <li id='liSemt61' > <div class='divSemt' name='chkIlceler' >  <input type='checkbox' id='chkSemt61'  class='big-checkbox'>Mahfesığmaz  </div> 
                <ul id=ulListMahalle>
                    <li id='liMahalle161' > <div class='divMahalle' name='chkIlceler' >  <input type='checkbox' id='chkMahalle161'  class='big-checkbox'>Belediyeevleri Mah.  </div> </li>  
                    <li id='liMahalle162' > <div class='divMahalle' name='chkIlceler' >  <input type='checkbox' id='chkMahalle162'  class='big-checkbox'>Beyazevler Mah.  </div> </li>  
                    <li id='liMahalle163' > <div class='divMahalle' name='chkIlceler' >  <input type='checkbox' id='chkMahalle163'  class='big-checkbox'>Esentepe Mah.  </div> </li>  
               </ul>
            </li>
        </ul>
    </li>
</ul>

jQuery:

$('#ulListMahalle').on('click', 'li', function () {
    console.log("li clicked");
});

I fill ul list dynamically with getJSON like that :

  $.getJSON("../Ilanlar/GetSemtMahalle", { ilceIDs: ilceIDs }, function (data) {

            var ilceName = ""; var semtName = "";

            for (var i = 0; i < data.length; i++) {
                if (data[i].Ilce != ilceName) {

                    if (i != 0) {
                        htmlText += "</ul></li>";

                    }

                    htmlText += "<li><div class=divIlceHeader>" + data[i].Ilce+"</div>";

                    htmlText += "<ul class=ulListSemt>";
                }
                if (data[i].Semt != semtName)
                {
                    if (data[i].Ilce == ilceName) {
                        htmlText += "</ul></li>";

                    }

                   // htmlText += "<li>" + data[i].Semt;
                    htmlText += "<li id='liSemt" + data[i].SemtId + "' > <div class='divSemt' name='chkIlceler' >  <input type='checkbox' id='chkSemt" + data[i].SemtId + "'  class='big-checkbox'>" + data[i].Semt + "  </div>  ";

                   semtName = data[i].Semt;
                   htmlText += "<ul id=ulListMahalle>";
                }

             //   htmlText += "<li>" + data[i].Mahalle + "</li>";
                htmlText += "<li id='liMahalle" + data[i].MahalleId + "' > <div class='divMahalle' name='chkIlceler' >  <input type='checkbox' id='chkMahalle" + data[i].MahalleId + "'  class='big-checkbox'>" + data[i].Mahalle + "  </div> </li>  ";

                ilceName = data[i].Ilce;

                if (i != data.length - 1) {
                    if (ilceName != data[i + 1].Ilce)
                        htmlText += "</ul></li>";
                }
            }

            mainDiv.html(htmlText);
           // console.log(htmlText);
        });