在文档准备就绪时触发jQuery更改功能

Question

我的更改功能允许用户从国家切换到国家并获得不同的文本和功能。它在更改国家/地区选择时有效。但在初始页面加载时，它不会触发jQuery更改来为默认/初始国家设置隐藏和显示文本div。

这两个div显示在初始页面加载。当我离开，然后回到默认/初始国家时，改变火势，隐藏并显示火情，并显示正确的信息和功能。

我已经尝试过document.ready，它们在开关选择内部和更改功能外都具有更改功能。既不工作 - 也不会在doc开头的情况下在开关盒中触发隐藏，显示和其他jQuery。我不清楚'准备'是否是一个有效的触发事件。

我也曾尝试：

$('input[name=country]').value('US').trigger('click'); 

，但它打破了变化的功能。这是代码。下面的国家选择只是简单的两个国家，但实际上有很多。

$(document).ready(function() 
{ 
//1st tier - select country via radio buttons:   
//Initialize country 
$('input[name=country]:first').attr('checked', true); //Set first radio button (United States) 
//$('input[name=country]:first').attr('checked', true).trigger('ready'); //sets 1st button, but does not fire change 
//$('input[name=country]:first').trigger('click'); //sets 1st button, but does not fire change 

$('input[name=country]').change(function() 
{                    
// change user instructions to be country specific 
    switch ($('input[name=country]:checked').val()) 
    { 
     case 'US': 
     $('#stateMessage1').text('2. Select a state or territory of the United States.'); 
     $('#stateMessage2').text('Start typing a state of the United States, then click on it in the dropdown box.'); 
     $('#threeSelects').show(); 
     $('#twoSelects').hide(); 
     //select via 3 steps       
     break;   
     case 'CA': 
     $('#stateMessage1').text('2. Select a province or territory of Canada.'); 
     $('#stateMessage2').text('Start typing a province of Canada, then click on it in the dropdown box.'); 
     $('#twoSelects').show(); 
     $('#threeSelects').hide(); 
     //select town via 2 steps - country, town   
     break;   
    } 
}); 
}); 

Answer 1

只要将.trigger('change')链接到处理程序分配的末尾即可。

// ----------v-------v-----quotation marks are mandatory 
$('input[name="country"]').change(function() 
{                    
// change user instructions to be country specific 
    switch ($('input[name="country"]:checked').val()) 
    { 
     case 'US': 
     $('#stateMessage1').text('2. Select a state or territory of the United States.'); 
     $('#stateMessage2').text('Start typing a state of the United States, then click on it in the dropdown box.'); 
     $('#threeSelects').show(); 
     $('#twoSelects').hide(); 
     //select via 3 steps       
     break;   
     case 'CA': 
     $('#stateMessage1').text('2. Select a province or territory of Canada.'); 
     $('#stateMessage2').text('Start typing a province of Canada, then click on it in the dropdown box.'); 
     $('#twoSelects').show(); 
     $('#threeSelects').hide(); 
     //select town via 2 steps - country, town   
     break;   
    } 
}).trigger('change'); // <--- RIGHT HERE 

---

或者，如果你只希望它使用的第一个元素，使用triggerHandler()代替。

 // ... 
     $('#twoSelects').show(); 
     $('#threeSelects').hide(); 
     //select town via 2 steps - country, town   
     break;   
    } 
}).triggerHandler('change'); // <--- RIGHT HERE 

Answer 2

为什么在选择合适的单选按钮之后不要触发change？

$('input[name=country]').change(); 

这相当于

$('input[name=country]').trigger('change'); 

Answer 3

之前最终}）;,加入$（ '输入'）的变化（）;

Answer 4

这通常是由如下：

function onChange() 
{                    
    switch ($('input[name=country]:checked').val()) 
    .... 
} 

$('input[name=country]').change(onChange); // 1. attach it as event handler. 
onChange();        // 2. call it first time.