如何在頁面加載時觸發 jquery 功能？

Question

我有以下功能：

$('#borderColor').on('change', function() {
  // update inventory
  updateInventory(this.options[this.selectedIndex].text);  
});

頁面加載時如何自動觸發此功能？

Answer 1

你聽說過jquery 觸發器嗎？

$(function() {
  $('#borderColor').trigger('change')
});

Answer 2

只需在頁面加載時觸發選擇上的更改事件。 這樣你就不需要編寫重復的代碼，一切都在一個地方處理。

使用 $('#selector').trigger() 您可以觸發任何事件，例如change 、 click 、 input等...您正在收聽。

使用$(document).ready(function() { /** your code here **/})您可以設置您希望在頁面完成加載和渲染后運行的代碼。

 function updateInventory(value) { $('#inventory').text(value); } $('#borderColor').on('change', function() { // update inventory updateInventory(this.options[this.selectedIndex].text); }); $(document).ready(function() { $('#borderColor').trigger('change'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="borderColor"> <option value="red">red</option> <option value="blue" selected="selected">blue</option> </select> <div id="inventory"> </div>