如何在页面加载时触发 jquery 函数？

Question

我有以下功能：

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

如何在页面加载时自动触发该功能？

Answer 1

只需在页面加载时的选择上触发更改事件。这样您就不需要编写重复的代码，一切都在一个地方处理。

使用 $('#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>

Answer 2

你听到jquery trigger了吗？

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