在文檔準備就緒時觸發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.