Question

我在页面上有一个帖子列表，当这些帖子悬停在上面时会显示一个“阅读更多”的叠加层。在页面底部是一个按钮，它运行ajax函数以获得更多帖子。在ajax成功加载后，“read more”缩略图覆盖不再显示在鼠标悬停上。

这必须是因为javascript已经执行了，我已经将更多元素加载到dom中。如何重新执行相同的JS功能以允许新帖子也有叠加？

我尝试在ajax成功时重新运行我的函数，但它似乎没有做任何事情。没有错误或任何事情。

的JavaScript

jQuery(".thumboverlay").mouseenter(function() {
                    jQuery(this).stop().animate({
                        opacity: 1
                    });
                });

                    jQuery(".inspiration-project-title").mouseenter(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 1
                        });
                    });

                jQuery(".thumboverlay").mouseleave(function() {
                    jQuery(this).stop().animate({
                        opacity: 0
                    });
                });
                    jQuery(".inspiration-project-title").mouseleave(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 0
                        });
                    });

HTML / PHP

<a href='.get_permalink().'>
   <div class="inspirations-page-featured-image">
     <div class="thumboverlay">
       <p>READ MORE</p>
      </div>'.$printFeaturedImage.'
    </div>
</a>

的Ajax

// ajaxLoop.js  
jQuery(function($){  
    var page = 1;  
    var loading = true;  
    var $window = $(window);  
    var $ajaxLoadMoreButton = $("body.blog .ajaxLoadMoreButton");  
    var $content = $("body.blog #container");  
    var load_posts = function(){  
            $.ajax({  
                type       : "GET",  
                data       : {numPosts : 1, pageNumber: page},  
                dataType   : "html",  
                url        : "wp-content/themes/twentytwelve/loopHandler.php", 
                beforeSend : function() {  
                    if(page !=0) {  
                         $ajaxLoadMoreButton.before('<div id="temp_load" style="text-align:center"><img src="wp-content/themes/twentytwelve/images/ajax-loader.gif" /></div>');                          
                    }  
                },  
                success    : function(data){  
                    $data = $(data);  
                    if($data.length){  
                        $data.hide();  
                        $content.isotope('insert', $(data) );
                        $data.fadeIn(500, function(){  
                            $("#temp_load").remove();  
                            loading = false;  
                        });
                    } else {  
                        $("#temp_load").remove();  
                        $ajaxLoadMoreButton.fadeOut().before('<p class="no-more-posts-warning">Sorry, there are currently no more posts to load.</p>');
                    }  
                },  
                error     : function(jqXHR, textStatus, errorThrown) {  
                    $("#temp_load").remove();  
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
                }  
        });  
    }  

    $ajaxLoadMoreButton.click(function() {                  
                loading = true;  
                page++;  
                load_posts();   
    });  

});

Answer 1

这里有几种可能的解决方案：

创建一个新函数，它只找到新添加的元素并为它们连接相应的事件处理程序，并在加载新元素后在ajax函数的成功处理函数中调用该函数。
使用委派的事件处理，它将自动处理新添加的元素。
更改添加新元素的方式。不要执行elem.innerHTML += htmlstring之类的操作，因为它会重新创建破坏其事件处理程序的所有现有元素。

哪一个更好或者究竟如何实现它们取决于您的HTML以及您使用javascript所做的事情，因此我们无法在不了解您的具体情况（相关HTML和JS）的情况下更具体地提出建议。 / p>

Answer 2

正如jfriend00建议的那样，您可以使用委托事件处理。在Jquery你可以这样做。

$( "body" ).delegate( ".ajaxLoadMoreButton", "click", function() {
                  loading = true;  
                page++;  
                load_posts();   
});

这会将函数绑定到现在和将来与选择器匹配的所有元素（当在页面中添加n个新元素时）阅读更多关于代表的here

Answer 3

我最终能够在移动一些东西之后重新启动该功能，并将整个功能的这一部分添加到它自己的单独功能中。

function re_fire_hoverStates() {
   jQuery(".thumboverlay").mouseenter(function() {
                    jQuery(this).stop().animate({
                        opacity: 1
                    });
                });

                    jQuery(".inspiration-project-title").mouseenter(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 1
                        });
                    });

                jQuery(".thumboverlay").mouseleave(function() {
                    jQuery(this).stop().animate({
                        opacity: 0
                    });
                });
                    jQuery(".inspiration-project-title").mouseleave(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 0
                        });
                    });
}

然后我在页面加载时第一次运行了该函数，$（document）.ready（re_fire_hoverStates）;

然后按照你的建议再次运行该函数，关于Ajax的成功：

// ajaxLoop.js  
jQuery(function($){  
    var page = 1;  
    var loading = true;  
    var $window = $(window);  
    var $ajaxLoadMoreButton = $("body.blog .ajaxLoadMoreButton");  
    var $content = $("body.blog #container");  
    var load_posts = function(){  
            $.ajax({  
                type       : "GET",  
                data       : {numPosts : 1, pageNumber: page},  
                dataType   : "html",  
                url        : "wp-content/themes/twentytwelve/loopHandler.php", 
                beforeSend : function() {  
                    if(page !=0) {  
                         $ajaxLoadMoreButton.before('<div id="temp_load" style="text-align:center"><img src="wp-content/themes/twentytwelve/images/ajax-loader.gif" /></div>');                          
                    }  
                },  
                success    : function(data){  
                    $data = $(data);  
                    if($data.length){  
                        $data.hide();  
                        $content.isotope('insert', $(data) );
                        $data.fadeIn(500, function(){  
                            $("#temp_load").remove();  
                            loading = false;
                            re_fire_hoverStates();  
                        });
                    } else {  
                        $("#temp_load").remove();  
                        $ajaxLoadMoreButton.fadeOut().before('<p class="no-more-posts-warning">Sorry, there are currently no more posts to load.</p>');
                    }  
                },  
                error     : function(jqXHR, textStatus, errorThrown) {  
                    $("#temp_load").remove();  
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
                }  
        });  
    }  
    $ajaxLoadMoreButton.click(function() {                  
                loading = true;  
                page++;  
                load_posts();   
    });  
});

Ajax成功后重新执行Javascript

3 个答案: