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访问此选择框值的更好方法。这是工作代码：

<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

在加载和更改时执行jQuery函数

3 个答案: