Question

我有这个动作：

$(document).ready(function(){
    $('.SubCategoryList li').each(function(index, element) {
        $(element).append('<div class="ProductListWrapper"></div>')
        var subcategory_link = $(element).find('a').attr('href');
        $(element).find('.ProductListWrapper').load( subcategory_link + ' #CategoryContent ul.ProductList');
     });
 });

完全像我想要的那样工作。

我还有其他动作。

$(document).ready(function(){
    $('.SubCategoryList .ProductList li').mouseover(function(){
        var ImageSRC = $(this).find(".ProductImage a img").attr('src');
        NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg');
        $(this).find('.ProductImage a img').attr('src',NewImageSRC);
        $(this).find('.ProductImage').css('position','relative');
        $(this).find('.ProductImage a img').css('position','absolute').css('top','-50px').css('left','-90px');
    });
    $('.Content .ProductList li').mouseleave(function(){
        var ImageSRC = $(this).find(".ProductImage a img").attr('src');
        NewImageSRC = ImageSRC.replace('.400.400.jpg','.200.200.jpg');
        $(this).find('.ProductImage a img').attr('src',NewImageSRC);
        $(this).find('.ProductImage').css('position','static');
        $(this).find('.ProductImage a img').css('position','static').css('top','auto').css('left','auto');
    });
 });

在控制台上也可以像我想要的那样工作。

但是当我尝试跑步时，我会一个接一个地坚持下去，他们不会工作。有没有办法延迟第二个，直到第一个完成？

Answer 1

您需要使用$.load()方法的回调。这样，在jQuery完成加载新DOM元素之前，不会设置绑定。

$(document).ready(function(){
    $('.SubCategoryList li').each(function(index, element) {
        $(element).append('<div class="ProductListWrapper"></div>')
        var subcategory_link = $(element).find('a').attr('href');
        $(element).find('.ProductListWrapper')
           .load( subcategory_link + ' #CategoryContent ul.ProductList', productHovers);
     });
 });

function productHovers(){
    $('.SubCategoryList .ProductList li').mouseover(function(){
        var ImageSRC = $(this).find(".ProductImage a img").attr('src');
        NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg');
        $(this).find('.ProductImage a img').attr('src',NewImageSRC);
        $(this).find('.ProductImage').css('position','relative');
        $(this).find('.ProductImage a img').css('position','absolute').css('top','-50px').css('left','-90px');
    });
    $('.Content .ProductList li').mouseleave(function(){
        var ImageSRC = $(this).find(".ProductImage a img").attr('src');
        NewImageSRC = ImageSRC.replace('.400.400.jpg','.200.200.jpg');
        $(this).find('.ProductImage a img').attr('src',NewImageSRC);
        $(this).find('.ProductImage').css('position','static');
        $(this).find('.ProductImage a img').css('position','static').css('top','auto').css('left','auto');
    });

}

http://api.jquery.com/load/

Jquery：如何在不同的操作完成后开始操作

1 个答案: