Word加载项中按钮失效：下拉菜单与DOM交互冲突的排查与修复

<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>
<div id="supportedVersion" />

'use strict';
(function () {
    Office.onReady(function () {
        $(document).ready(function () {
            if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
                $('#rogincorporate').click(insertRogIncorporate); // 按钮事件绑定
                $('#supportedVersion').html('This code is using Word 2016 or later.');
            } 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));
            }
        });
    }
})();

// 此脚本通常位于HTML文件的底部或单独的JS文件中
$(document).ready(function () {
    $("#name").on('change', function () {
        $(".data").hide(); // 隐藏所有 .data 元素
        $("#" + $(this).val()).fadeIn(700); // 显示当前选中的 .data 元素
    }).change(); // 页面加载时立即触发一次change事件
});

<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<!-- ... 其他脚本 ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 移除 Scripts/jquery-3.6.0.js 或 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js 中的一个 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- ... 其他脚本 ... -->

'use strict';

(function () {
    Office.onReady(function () {
        $(document).ready(function () {
            if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
                // 使用事件委托，将点击事件绑定到document，并指定选择器
                // 这样，即使 #rogincorporate 元素被隐藏或显示，只要它存在于DOM中，
                // 且在被点击时是可见的，事件就能被捕获。
                $(document).on('click', '#rogincorporate', insertRogIncorporate);
                $('#supportedVersion').html('This code is using Word 2016 or later.');
            } else {
                $('#supportedVersion').html('This code requires Word 2016 or later.');
            }
        });
    });

    // ... insertRogIncorporate 函数保持不变 ...
})();