Q:

JQuery - Event do not fire for element under some other element

I am facing a situation where I want to handle click event of li that is present under another element with class optWrapper. Most of these mark-up is generated due to third party javascript libraries. So, markup is something like 
   <div class="optWrapper multiple open">
       <ul class="options">
           <li data-val="7"><span><i></i></span><label>Critical Illness</label></li>
          <li data-val="25"><span><i></i></span><label>Critical Illness Insurance</label></li>
         <li data-val="3"><span><i></i></span><label>Critical Illness Silver</label></li>
      </ul>
  </div>

and my jQuery code is 
$(".optWrapper li").click(function () {
     alert();
 });

I can't find why this event is not getting called. Please help.
Edit 1
I am guessing this behavior is due to these element are loaded after jquery has downloaded in browser, is it that? if yes, than how could I tackle with it? 
Edit 2
These element are dynamically generated after dropdownlist's select event.

A:

The answer of onsubject is correct. Saying to use .on instead of .click. 
After jQuery 1.7 the preferred method is .on()
Addition on the answer of @onsubject , because his answer won't work, on dynamically created
".optWrapper li"

Instead of the actual element, use the body or its parent element.
$('body').on('click', '.optWrapper li', function() {
//do something
}

