javascript - Ajax 成功后重新执行 Javascript

Question

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

这一定是因为 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

这里有几个可能的解决方案:

1. 创建一个新函数，它将只查找新添加的元素并为它们连接适当的事件处理程序，并在加载新元素后在 ajax 函数的成功处理程序中调用该函数。

2. 使用将自动处理新添加的元素的委托(delegate)事件处理。

3. 改变添加新元素的方式。不要做像 elem.innerHTML += htmlstring 这样的事情，因为这会重新创建所有现有元素并破坏它们的事件处理程序。

哪个更好或具体如何实现它们取决于您的 HTML 和您使用 javascript 做什么，所以我们不能在没有看到您的确切情况(相关的 HTML 和 JS)的情况下提供更具体的建议。