jquery tagging does not respond to click events

jquery tagging does not respond to click eventsOne problem with the project today is to add <li></li> tags dynamically using jquery, and then add the click event to Li. The starting code is as follows

<div class= "Main-content" >
    <button class= "btn btn-positive btn-block loadbut" ><strong> loading ... </strong></button>
</div>

After adding the UL label

<div class= "Main-content" >
    <button class= "btn btn-positive btn-block loadbut" ><strong> loading ... </strong></button>
    <ul class= "Table-view connect-list" >
        <li class= "Table-view-cell Odd-list ">item 1</li> <li class=" Table-view-cell even-list ">item 2</li> <li-class=
        " Table-view-cell odd-list ">item 1</li>
        <li class=" Table-view-cell even-list ">Item 2</li>
        <li class= "Table-view-cell odd-list" >item 1</li> <li class=
        "Table-view-cell even-list" > Item 2</li>
    </ul>

Then add the Click event to the Li label to not respond.
Since the beginning of loading documents, the LI tag does not exist at all, how can respond to the event. So in response to this situation. The best way to do this is to have the parent element find the subclass element to see if he fits the element. How to do it, in JS, most of the events require 3 stages of capture-processing-bubbling. Except for a few events such as Blur. Most can be found to match the elements to be processed through the bubbling process of the parent class-subclass. Like the example above. In the event of the Ul bubbling process, will pass the element of Li, we will be in the process of processing our business. jquery provides us with a function such as on () to view the document ourselves. $ ('. Main-content '). On (' Click ', ' Li ', function (e) {
alert (this);
});

ps:$ (parent class selector). On ("event", "subclass selector", handler function);
This on () usage is not the same as live usage, which is distinguished.