Document ready not hit on page load, but it works using Developer Tools Console

Question

On Ajax Success, li element is appended to ul.

$.ajax({
           ..
     success: function (response) {
         response.data.forEach(function (x) {
            $("#ulMain").append('<li class="liSub">' + x + '</li>');
     }
});

It creates sth like this:

<ul>
  <li class="liSub">ABC</li>
  <li class="liSub">BCF</li>
</ul>

I want the dynamically added li elements to fire an alertbox on click. But the code below is not being hit.

$(document).ready(function () {
    $(".liSub").on("click", function () {
        alert("Fired");
    });
});

Interestingly, If I run the document.ready section of the code using F12 - Console, it works. What stops it run normally, and lets it run through console?

Answer 1

You missed . prefix for class and use event delgation for created dynamic dom elements

$("ul").on("click", '.liSub', function () {
     alert("Fired");
});

Answer 2

Since it is an element loaded dynamically, try delegating it:

$(document).ready(function () {
    $("body").on("click",".liSub", function () {
        alert("Fired");
    });
});

Answer 3

It is because when your page is ready, the ajax call is not finished. You can try this :

$(document).ready(function () {
    $("#ulMain").on("click",".liSub", function () {
        alert("Fired");
    });
});

It will bind the click to the #ulMain which exists at the execution and will delegate the event to .liSub at the moment of the click. It creates only one binding which is also better for global performance.