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

});

來源

2013-12-11 EHerman

如果你發佈你的代碼 – 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(); 
    }); 
});

來源

2013-12-11 01:40:36 EHerman

有幾個可能的小號olutions這裏：

創建一個新的功能，將找到剛纔新添加的元素，並掛上合適的事件處理程序對他們來說，並呼籲在AJAX功能的成功處理程序功能後的新元素都被加載。
使用委託事件處理將自動處理新添加的元素。
更改如何添加新元素。不要做像elem.innerHTML += htmlstring這樣的事情，因爲它會重新創建所有破壞事件處理程序的現有元素。

哪一個是好還是究竟是如何實現它們的取決於你的HTML，你就用你的JavaScript這樣做，我們真的不能建議更具體是什麼，沒有看到您的具體情況（相關HTML和JS）。

來源

2013-12-11 01:24:47 jfriend00

正如jfriend00建議的那樣，您可以使用委託事件處理。在JQuery中，你可以像這樣做。

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

這將綁定的功能，現在選擇匹配的所有元素和未來（N新的元素時，在頁面中添加）瞭解更多關於here委託

來源

2013-12-11 01:40:23 eggward

Ajax成功後重新執行Javascript

回答

相關問題