Question

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

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

我在切换选择内部和更改功能之外尝试了document.ready更改功能。两者都没有工作 - 他们不会在doc准备好的交换机案例中激活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;         
    }
});
});

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

在最后}）;之前，添加$（'input'）。change（）;

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.

在文档就绪时触发jQuery更改函数

4 个答案: