functions dont work in loaded content ajax .delegate, on Jquery

Question

I have some results that are loaded via Ajax in the #results container and anothers, the same content in #last_results (this one loads without ajax). The same scripts that work on #last_results doesnt work in #results I think due to they are not binded.

HTML

 <ul id="results"></ul>

     <ul id="last_results">
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
    </ul>

JQUERY This is a basic Jquery script:

   $('.showLb').on('click',function(e){
           alert('Show LightBox');

       });

This script works in the page li but not in the loaded via Ajax li . I knew I have to delegate or use on , How

Answer 1

Here you go. Now, My preference would be to ask you to actually go and check what this change does. Remember, we are here to help you understand.

 $('.results').on('click', '.showLb' ,function(e){ alert('Show LightBox'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="results"></ul> <ul id="last_results"> <li class=showLb>[click to show LightBox]</li> <li class=showLb>[click to show LightBox]</li> <li class=showLb>[click to show LightBox]</li> </ul> 

Answer 2

You have to define your on click method directly after you execute you ajax call.

$.ajax({
...
success: funtion(data){
       //your code
       $('.showLb').on('click',function(e){ alert('Show LightBox'); });
}
...