WordPress自定义联系人小部件添加功能异常求助

问题现象 #

开发的企业联系方式展示Widget仅支持添加单条信息，点击「添加另一个企业」按钮时，浏览器弹出「离开此站点？您所做的更改可能不会保存」提示，无法新增企业信息条目。

问题根源 #

1. JavaScript选择器错误：按钮元素不在指定容器内，container.find('.add_new_company')无法定位到按钮，点击事件未绑定成功，按钮默认触发表单提交行为，引发页面刷新提示。
2. PHP语法不规范：widget()方法结束后存在多余的未闭合注释/**，可能干扰代码解析。

修复步骤 #

1. 修正PHP注释问题 #

删除widget()方法结束后多余的/**注释：

// 原错误代码片段
public function widget( $args, $instance ) {
    // ... 方法原有内容 ...
}
/** // 多余的注释，删除此行

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
public function form( $instance ) {

修改后：

public function widget( $args, $instance ) {
    // ... 方法原有内容 ...
}

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
public function form( $instance ) {

2. 修复JavaScript按钮绑定问题 #

将按钮移至容器内部，并使用Widget唯一ID选择按钮，避免多Widget实例冲突：

// 在form()方法的HTML部分，将按钮放入container内
<div id="<?php echo $this->get_field_id( 'company_information' ); ?>">
    <?php
    // 原有的企业信息循环渲染代码
    ?>
    <p>
        <button class="button add_new_company" id="<?php echo $this->get_field_id( 'add_new_company' ); ?>">
            <?php echo __( 'Add Another Company' ); ?>
        </button>
    </p>
</div>

// 修改JavaScript选择器逻辑
<script>
    jQuery(document).ready(function($) {
        var container = $('#<?php echo $this->get_field_id( 'company_information' ); ?>');
        // 使用唯一ID定位按钮，确保绑定准确
        var addButton = $('#<?php echo $this->get_field_id( 'add_new_company' ); ?>');
        var index = <?php echo count( $company_names ); ?>;

        addButton.on('click', function(event) {
            event.preventDefault(); // 阻止默认表单提交行为
            index++;
            var companyInformation = '<div class="ciw_company_information_container">';
            companyInformation += '<label><?php echo __( 'Company Name:' ); ?></label>';
            companyInformation += '<input class="widefat" name="<?php echo $this->get_field_name( 'company_names' ); ?>[]" type="text" value="">';
            companyInformation += '<label><?php echo __( 'Contact Email:' ); ?></label>';
            companyInformation += '<input class="widefat" name="<?php echo $this->get_field_name( 'contact_emails' ); ?>[]" type="email" value="">';
            companyInformation += '</div>';
            container.append(companyInformation);
        });
    });
</script>

3. 可选优化：分离JavaScript代码 #

将Widget的JS代码移至单独文件，通过后台脚本加载机制引入，避免重复渲染脚本：

// 在custom-widget.php中添加脚本注册函数
function contactinformation_widget_enqueue_scripts() {
    if ( is_admin() ) {
        wp_enqueue_script(
            'contactinformation-widget-admin',
            get_stylesheet_directory_uri() . '/js/contactinformation-widget-admin.js',
            array( 'jquery' ),
            '1.0',
            true
        );
        // 传递Widget字段名称等参数到前端
        wp_localize_script(
            'contactinformation-widget-admin',
            'ciwAdmin',
            array(
                'fieldNames' => array(
                    'companyNames' => $this->get_field_name( 'company_names' ),
                    'contactEmails' => $this->get_field_name( 'contact_emails' )
                )
            )
        );
    }
}
add_action( 'admin_enqueue_scripts', 'contactinformation_widget_enqueue_scripts' );

将JS逻辑写入子主题js/contactinformation-widget-admin.js文件，通过本地化参数获取字段名称。

验证修复 #

修改后刷新Widget后台页面，点击「添加另一个企业」按钮，将正常新增企业信息条目，不再弹出离开站点提示。

内容的提问来源于stack exchange，提问作者Abid Fakhrealam