javascript - 在AJAX调用之后使用DOM

我有这个功能：

$('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]（它们是通过load函数加载的）？

编辑我

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

最佳答案

如果仅将元素加载到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();
});