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

firing a jQuery change function at document ready

提问by Mike_Laird

My change function allows users to switch from country to country and get different text and features. It works when changing country selections. But at initial page load, it does not fire jQuery change to set the hide and show text divs for the default / initial country.

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

Both divs display at initial page load. When I change away and then back to the default/initial country, change fires, hide and show fire, and shows the proper information and features.

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

I have tried document.readywith a change function both inside the switch selections and outside the change function. Neither work - they don't fire the hide, show and other jQuery in the switch cases at doc ready. Its not clear to me whether 'ready' is a valid trigger event.

我已经尝试document.ready在开关选择内部和更改功能之外使用更改功能。两者都不起作用 - 在文档就绪时，它们不会在 switch 案例中触发 hide、show 和其他 jQuery。我不清楚“准备好”是否是有效的触发事件。

I have also tried:

我也试过：

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

but it broke the change function. Here's the code. The country selection below is just 2 countries to keep it simple, but actually, there are many.

但它破坏了更改功能。这是代码。为了简单起见，下面的国家/地区选择只是 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;         
    }
});
});

回答by user113716

Just chain .trigger('change')to the end of the handler assignment.

只需链接.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

---

---

Or if you only want it to fire on the first element, use triggerHandler()instead.

或者，如果您只希望它在第一个元素上触发，请triggerHandler()改用。

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

回答by no.good.at.coding

Why not just trigger changeafter selecting the appropriate radio buttons?

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

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

This is equivalent to

这相当于

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

回答by SickHippie

Before the final });, add in $('input').change();

在最后的 }); 之前，添加 $('input').change();

回答by c-smile

This usually is made as:

这通常是这样制作的：

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.