通过jquery在单个函数中触发change和ready事件

Question

我不想为更改和准备编写相同的代码。那么，如何将这两个事件组合在一个函数中呢？

$('#c_country').ready(function(){                              
var austaffinitycost=<%=affinityServerCostList.get(3) %>;   //getting the data from database
if($('#c_country').val()=="Australia"){                     //c_country is a input filed
$('#sl_cost').val(austaffinitycost);
}
else{
$('#sl_cost').val("4");
}
}).trigger('change');                                          //firing the change event

Answer 1

为了进一步详述我的评论，.ready()函数实际上是一个特殊的jQuery构造，它是DOMContentLoaded事件的polyfill/alias，因此只有当您这样使用时才有用：$(document).ready(function() { ... }):

.ready()方法提供了一种在页面的文档对象模型(DOM(变得可以安全操作时立即运行JavaScript代码的方法。

此外，尽管大多数人仍然使用$(document).ready(function() { ... })，但官方文档建议使用$(function() { ... })。

---

如果您希望逻辑在文档准备就绪时运行，并且在#c_country触发onchange事件时运行，您可以简单地将其抽象为一个单独的函数。然后，在DOM就绪和onchange事件处理程序中分别调用该函数：

function setCost() {
var austaffinitycost = <%=affinityServerCostList.get(3) %>;
if ($('#c_country').val() === 'Australia') {
$('#sl_cost').val(austaffinitycost);
} else {
$('#sl_cost').val('4');
}
}
$(function() {
$('#c_country').change(function() {
setCost();
});
setCost();
});

一些专业提示：

• 尽可能始终使用===，这样更安全
• 就我个人而言，我不会将服务器数据编码为var austaffinitycost = <%=affinityServerCostList.get(3) %>;。如果可能的话，依靠异步请求获取服务器端数据

• 您可以使用临时运算符缩短if/else语句，即

  $('#sl_cost').val($('#c_country').val() === 'Australia' ? austaffinitycost : '4');