html - Click function on element returned from the jquery load func -

i need know how call click jquery function on element returned load func (again jquery). cant elements class name , thinking not existing in dom when try them.

here main page:

        <div id="content">             <div id="main"></div>             <div style="clear: both;"></div>         </div>   

i loading additional html content inside #main load() jquery function , works fine. inside #main content this:

<div id="home_container"> <div id="left_column" class="home_columns">     <img src="images/code.jpg" alt="code" class="pics home_pics" />     <p class="home_text">code snippets</p> </div> <div id="center_column" class="home_columns">     <img src="images/me_home.jpg" alt="me" class="pics home_pics" />     <p class="home_text">about</p> </div> <div id="right_column" class="home_columns">     <img src="images/contacts.jpg" alt="code" class="pics home_pics" />     <p class="home_text">contacts</p> </div> 

then calling jquery function this:

$(document).ready(function () { "use strict"; $('div.home_columns').click(function () {     console.log("clicked!"); }); }); 

but there no "clicked!" log in browsers console. problem here? think when trying bind func div not inizialized? right , if yes - how can overcome this?

thank nikola

so use delegation this:

$('#main').on('click', 'div.home_columns', function () {     console.log("clicked!"); });