web-dev-qa-db-ja.com

ドキュメントの準備ができたときにjQuery変更関数を起動する

私の変更機能を使用すると、ユーザーは国を切り替えて、さまざまなテキストや機能を取得できます。国の選択を変更するときに機能します。ただし、最初のページの読み込み時に、デフォルト/初期の国のテキストdivの非表示と表示を設定するjQueryの変更は発生しません。

両方のdivは、最初のページの読み込み時に表示されます。離れてデフォルト/最初の国に戻ると、火を変更し、火を非表示にして表示し、適切な情報と機能を表示します。

私が試してみました document.readyスイッチ選択の内側と変更機能の外側の両方に変更機能があります。どちらも機能しません-docreadyのスイッチケースでhide、show、その他のjQueryを起動しません。 'ready'が有効なトリガーイベントであるかどうかは私にはわかりません。

私も試しました：

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

しかし、それは変更機能を壊しました。これがコードです。以下の国の選択は、簡単にするために2か国にすぎませんが、実際には多くの国があります。

$(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;         
    }
});
});
jqueryinitializationonchange
19
Mike_Laird

.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
_
33
user113716

適切なラジオボタンを選択した後、changeをトリガーしないのはなぜですか？

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

これは同等です

$('input[name=country]').trigger('change');
2
no.good.at.coding

最後の}）;の前に、$（ 'input'）。change（）;を追加します。

0
SickHippie

これは通常、次のように作成されます。

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.
0
c-smile