Ajax成功后重新执行Javascript

我有一个页面上的帖子列表，当鼠标悬停在上面时会显示一个覆盖图，上面写着“阅读更多”。页面底部有一个按钮，它运行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();   
    });  

});  

//ajaxLoop.js
jQuery（函数（$）{
var-page=1；
var加载=真；
变量$window=$（window）；
var$ajaxLoadMoreButton=$（“body.blog.ajaxLoadMoreButton”）；
var$content=$（“body.blog#container”）；
var load_posts=函数（）{
$.ajax（{
键入：“获取”，
数据：{numPosts:1，页码：page}，
数据类型：“html”，
url:“wp content/themes/twentyiven/loopHandler.php”，
beforeSend:function（）{
如果（第！=0页）{
$ajaxLoadMoreButton.之前（“”）；
}  
},  
成功：函数（数据）{
$data=$（数据）；
如果（$data.length）{
$data.hide（）；
$content.同位素（'插入'，$（数据））；
$data.fadeIn（500，函数（）{
$（“#临时加载”）.remove（）；
加载=假；
});
}否则{
$（“#临时加载”）.remove（）；
$ajaxLoadMoreButton.fadeOut（）。之前（“
对不起，当前没有更多的帖子要加载。
”；
}  
},  
错误：函数（jqXHR，textStatus，errorshown）{
$（“#临时加载”）.remove（）；
警报（jqXHR+“：”+textStatus+“：：”+errorshown）；
}  
});  
}  
$ajaxLoadMoreButton。单击（函数（）{
加载=真；
page++；
加载_柱（）；
});  
});  

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

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

使用将自动处理新添加元素的委托事件处理

更改添加新元素的方式。不要做类似于

elem.innerHTML+=htmlstring

的事情，因为这样会重新创建所有现有元素，破坏它们的事件处理程序

---

哪一个更好或准确地实现它们取决于您的HTML以及您使用javascript所做的工作，因此如果不了解您的具体情况（相关HTML和JS），我们无法给出更具体的建议。

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

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

这将把函数绑定到与选择器现在和将来匹配的所有元素（当在页面中添加n个新元素时）

---

阅读有关委派的更多信息

在改变一些内容并将整个函数的该部分添加到自己的单个函数后，我最终能够重新启动该函数

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

//ajaxLoop.js
jQuery（函数（$）{
var-page=1；
var加载=真；
变量$window=$（window）；
var$ajaxLoadMoreButton=$（“body.blog.ajaxLoadMoreButton”）；
var$content=$（“body.blog#container”）；
var load_posts=函数（）{
$.ajax（{
键入：“获取”，
数据：{numPosts:1，页码：page}，
数据类型：“html”，
url:“wp content/themes/twentyiven/loopHandler.php”，
beforeSend:function（）{
如果（第！=0页）{
$ajaxLoadMoreButton.之前（“”）；
}  
},  
成功：函数（数据）{
$data=$（数据）；
如果（$data.length）{
$data.hide（）；
$content.同位素（'插入'，$（数据））；
$data.fadeIn（500，函数（）{
$（“#临时加载”）.remove（）；
加载=假；
重新点火（）；
});
}否则{
$（“#临时加载”）.remove（）；
$ajaxLoadMoreButton.fadeOut（）。之前（“
对不起，当前没有更多的帖子要加载。
”；
}  
},  
错误：函数（jqXHR，textStatus，errorshown）{
$（“#临时加载”）.remove（）；
警报（jqXHR+“：”+textStatus+“：：”+errorshown）；
}  
});  
}  
$ajaxLoadMoreButton。单击（函数（）{
加载=真；
page++；
加载_柱（）；
});  
});

如果你发布你的代码会很有帮助，不是吗