Working with DOM after AJAX call
<p>I have this function:</p>

<pre><code>$('body').on('click', '.kategorija_izbor ul a, .mali_oglas a[role=pretraga]', function(e){
        var mgl_wrapper = $('.mali_oglasi_wrapper'),
        mgl = $(".mali_oglasi"), 
        mgl_space =  $(this).attr('href').replace(/\s+/g, '-').toLowerCase();
        link = mgl_space + ' .mali_oglasi';         
        mgl.animate({'opacity' : 0}, 400, function(){
            mgl_wrapper.load(link, function(){
                mgl.animate({'opacity' : 1}, 400);
            });
        });
        e.preventDefault(); 
    });
</code></pre>

<p>It is working, but I would like to know is there another way to do it. It seems to me that this way is time consuming and resource inefficient. Every time page is clicked script is going through DOM and search for specific elements. Is there a way to store <strong>.kategorija_izbor ul a</strong> and  .mali_oglas a[role=pretraga] (they are bout loaded via load function )?</p>

<p><strong>EDIT I</strong></p>

<p><strong>.kategorija_izbor ul a</strong> and  .mali_oglas a[role=pretraga] are children of <strong>mgl_wrapper *( $('.mali_oglasi_wrapper'))</strong>, and they are dynamically created every time they are clicked.</p>
