重新運行jquery函數onclick

我有一個簡單的jquery腳本來改變圖像的url路徑。唯一的問題是，我點擊加載更多按鈕後不適用。所以我試圖在單擊按鈕後再次調用腳本的方法。重新運行jquery函數onclick

<script type='text/javascript'> 
$(document).ready(function ReplaceImage() { 
    $(".galleryItem img").each(function() { 
     $(this).attr("src", function(a, b) { 
      return b.replace("s72-c", "s300") 
     }) 
    }) 
}); 
</script>

HTML

<a href="javascript:;" onclick="ReplaceImage();">Load More</a>

來源

2016-10-07 WebDev

您的ReplaceImages是您的.ready（）中的匿名命名函數。將它移動到.ready之外，然後執行$（document）.ready（ReplaceImage） – Keith

雖然Keith的回答會得到你在找什麼，我真的不推薦這種做法。用這樣的東西你會好得多。

<script type="text/javascript"> 
$(function() { 

    var replaceImage = function() { 
     $('.galleryItem img').each(function() { 
      $(this).attr('src', function(index, value) { 
       return value.replace('s72-c', 's300'); 
      }); 
     }); 
    }; 
    replaceImage(); 

    $('.js-replace-image').on('click', replaceImage); 

}); 
</script>

使用這個網站

<button class="js-replace-image">Load More</button>

通過採取這種方法，你不要暴露到窗口對象，這可能是問題的一個點，如果你與其他圖書館合作的任何全局變量（或開發商）不能很好地管理它們的全局變量。

此外，通過移動到類名稱並通過JavaScript將事件處理程序綁定到DOM節點，您將來可以更好地證明自己。還允許您輕鬆地將此功能輕鬆添加到更多按鈕，但只需添加一個類即可。

由於需要做什麼的語義，我將錨標記更新爲一個按鈕 - 它不會鏈接到任何地方，它只是頁面上的動態功能。這是最適合的按鈕。

我也建議把這個放在你網站的頁腳上，因爲這樣，根據你的情況，你已經有了正確更新的圖片而無需點擊按鈕。如果您在加載後在頁面上動態插入更多圖像，或者如果此腳本位於文檔頭部（意味着jQuery無法瞭解圖像），則只需要該按鈕。

我希望這會有所幫助，如果您有任何問題，請與我聯繫。

來源

2016-10-07 00:37:29 sic1

如果您的JavaScript是通過外部文件包含的， 'script'標記中的'defer'屬性，以確保在DOM完全加載之前腳本不會運行。儘管你正在使用jQuery的'ready（）'，這對於不加載直到所有東西都被加載，所以你可能沒問題。 –

重新運行jquery函數onclick

回答

相關問題