在AJAX调用之后使用DOM

Question

我有这个功能：

$('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(); 
    });

它工作正常，但我想知道还有另一种方法可以做到这一点。 在我看来，这种方式耗时且资源效率低下。 每次单击页面时，脚本都会通过DOM并搜索特定元素。 有没有办法存储.kategorija_izbor ul和.mali_oglas a [role = pretraga]（它们是通过加载函数加载的）？

编辑我

.kategorija_izbor ul a和.mali_oglas a [role = pretraga]是mgl_wrapper *（$（'。mali_oglasi_wrapper'））的子项 ，每次点击它们时都会动态创建它们。

Answer 1

如果仅将元素加载到mgl ，则只需限制click处理程序的作用域，以便jQuery不必搜索整个body ：

var $mgl_wrapper = $('.mali_oglasi_wrapper');
var $mgl = $('.mali_oglasi');

$mgl.on('click', '.kategorija_izbor ul a, .mali_oglas a[role=pretraga]', function(e) {
    var mgl_space =  this.href.replace(/\s+/g, '-').toLowerCase();

    $mgl.animate({'opacity' : 0}, 400, function() {
        $mgl_wrapper.load(mgl_space + ' .mali_oglasi', function() {
            $mgl.animate({'opacity' : 1}, 400);
        });
    });

    e.preventDefault(); 
});