目前您必须在billing_address_1 字段上click 才能触发事件侦听器并更新您的字段,因为您的代码是这样说的!
有多种方法可以解决此问题。例如,您可以添加一个不同的事件侦听器,而不是侦听 click 事件。
首先,您可以监听 on change 事件。这将发生在地址字段的值已更改并且用户单击/跳出billing_address_1 字段时:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
您可以在这里使用的另一个事件侦听器是input 事件侦听器。每次更改 billing_address_1 字段的值时都会发生这种情况。即使按下space 键、backspace 键等也会触发。
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('input', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
在blur 事件上可能有帮助的另一个事件。 当用户点击/标签离开billing_address_1 字段时,此事件将触发。这个事件和change事件的区别在于,当你监听这个事件时,即使billing_address_1字段的值没有改变,也会更新。
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
现在,根据您希望如何构建代码及其背后的逻辑,您可以同时使用这些事件:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change input blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
如何编辑代码,使使用 AJAX 的结果立即可见,而无需再次单击填充的字段?
我认为最后一个解决方案就是您正在寻找的!一起使用所有这些事件侦听器将确保您的运输方式不断更新。