Jquery没有触发li点击哪个ul列表是动态填充的

Question

问题是当点击ul li时jQuery不会触发。 当我将ul填充为静态时，射击没有问题。 但是，如果我使用getJSON函数从数据库中动态填充ul列表，请单击“不激活”。列表已填充，但是点击未点亮。 我需要你的帮助来了解问题所在。

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");
});

我使用getJSON动态填充ul列表：

  $.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);
        });