Word Add-in中动态按钮显示与事件绑定失效的排查与解决

// ...
$(document).ready(function () {
    if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
        $('#rogincorporate').click(insertRogIncorporate); // 按钮事件绑定
        $('#supportedVersion').html('This code is using Word 2016 or later.');
    }
    // ...
});
// ...

<div class="content">
    <div id="rog" class="data">
        <h3>Interrogatory Objections</h3>
        <p>Click the appropriate button to insert an objection.</p>
        <br />
        <button id="rogincorporate">Incorporate General Response and Objections</button>
        <br /><br />
    </div>
    <!-- 其他 .data 元素 -->
</div>

<!-- ... 其他 HTML ... -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#name").on('change', function () {
            $(".data").hide(); // 隐藏所有 .data 元素
            $("#" + $(this).val()).fadeIn(700); // 显示当前选中的 .data 元素
        }).change(); // 页面加载时立即触发一次 change 事件
    });
</script>

<!-- 从 Home.html 中移除以下脚本块 -->
<!--
<script>
    $(document).ready(function () {
        $("#name").on('change', function () {
            $(".data").hide();
            $("#" + $(this).val()).fadeIn(700);
        }).change();
    });
</script>
-->

'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready.
        $(document).ready(function () {
            // The document is ready.
            if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
                // 1. 绑定按钮点击事件，确保在任何隐藏操作前完成
                $('#rogincorporate').click(insertRogIncorporate);
                $('#supportedVersion').html('This code is using Word 2016 or later.');

                // 2. 绑定下拉菜单的change事件
                $("#name").on('change', function () {
                    $(".data").hide(); // 隐藏所有 .data 元素
                    $("#" + $(this).val()).fadeIn(700); // 显示当前选中的 .data 元素
                });

                // 3. 页面加载时，手动触发一次change事件，以设置初始的显示状态
                // 确保默认选中的内容是可见的
                $("#name").change();

            } else {
                $('#supportedVersion').html('This code requires Word 2016 or later.');
            }
        });
    });

    async function insertRogIncorporate() {
        await Word.run(async (context) => {
            const thisDocument = context.document;
            const range = thisDocument.getSelection();
            range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
            await context.sync();
            console.log('Added a incorporate text.');
        })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
    }

})();

<select id="name">
    <option value="rog" selected>Interrogatories</option> <!-- 添加 selected 属性 -->
    <option value="rfp">Requests for Production</option>
    <option value="rfa">Requests for Admission</option>
</select>