Ajax成功后重新执行Javascript

问题描述：

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

这必须是因为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>

阿贾克斯

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

});

如果你发布你的代码 – RustyToms

它不会帮助这将是有益的。该功能长达300多行。我只需要了解如何重新定义功能。 – EHerman

我们不要求300行代码。我们要求你发布你如何“布线和解雇”东西的要点，并附上一些HTML标记来展示它，所以我们可以帮助你... – ErikE

答

我最终能重新在转移一些东西并将整个函数的那部分添加到它自己的单独函数后触发函数。

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）。就绪（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(); 
    }); 
});

答

有几个可能的小号olutions这里：

创建一个新的功能，将找到刚才新添加的元素，并挂上合适的事件处理程序对他们来说，并呼吁在AJAX功能的成功处理程序功能后的新元素都被加载。
使用委托事件处理将自动处理新添加的元素。
更改如何添加新元素。不要做像elem.innerHTML += htmlstring这样的事情，因为它会重新创建所有破坏事件处理程序的现有元素。

哪一个是好还是究竟是如何实现它们的取决于你的HTML，你就用你的JavaScript这样做，我们真的不能建议更具体是什么，没有看到您的具体情况（相关HTML和JS）。

答

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

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

这将绑定的功能，现在选择匹配的所有元素和未来（N新的元素时，在页面中添加）了解更多关于here委托

Ajax成功后重新执行Javascript

相关推荐