在加載和更改時執行jQuery函數

Question

我在表單中有一個選擇字段，並希望在更改字段或在表單提交時重新加載頁面時執行一些jQuery。

<select name="emp_status_id" class="emp-status-id" >
    <option value=""></option>
    <option value="1">Full-Time Employment</option>
    <option value="2">Part-Time Employment</option>
    <option value="3">Casual</option>
    <option value="4">Self Employed</option>
</select>

我的jQuery在下面

function employmentGroups(id){ 
    var emp_status_id = id.val();
    // Do more stuff here
};

$( ".emp-status-id" ).change(function() {
    employmentGroups($(this));
});

不是：我將$（this）傳遞到函數中，而不是由於另一個與當前問題無關的原因將$（this）傳遞到函數中。

這對變更非常有效。

我還想在頁面加載時執行該功能，

我的問題是我不明白在加載時使用哪種jQuery方法來執行此功能。

我已經嘗試過了...

$( ".emp-status-id" ).ready(function() {
    employmentGroups($(this));
});

但是，這不起作用。

Answer 1

$(document).ready(function(){ employmentGroups($( ".emp-status-id" )); })

尋找這個嗎？

Answer 2

通過ID訪問此selectbox值的更好方法。 這是工作代碼：

<select id="emp_status_id" name="emp_status_id" class="emp-status-id" >
    <option value=""></option>
    <option value="1">Full-Time Employment</option>
    <option value="2">Part-Time Employment</option>
    <option value="3">Casual</option>
    <option value="4">Self Employed</option>
</select>

function employmentGroups(selector_id){ 
    var emp_status_id = $(selector_id).val();
    // Do more stuff here
};

// on page loaded
$(function() {

    // set onchange handler       
    $("#emp-status-id").change(function() {
        employmentGroups('#emp-status-id');
    });

    // just execute 
    employmentGroups('#emp-status-id');
});

Answer 3

有兩種方法可以做這樣的事情

1-使用load()但這會在每次頁面重新加載時觸發內部的任何代碼，即使使用時是第一次打開頁面

$(window).load(function() {
  // do whatever you want
});

2-使用內置的PerformanceNavigation界面...我沒有測試使用這種情況，但它恰好可用於檢測導航行為

if (performance.navigation.type === 1) {
  console.log('page reloaded');
}

或（與上述相同，但語法不同）

if (performance.navigation.type === PerformanceNavigation.TYPE_RELOAD){
  console.log('page reloaded');
}

進一步閱讀W3和MDN