Word加载项添加下拉菜单隐藏按钮后插入文本按钮失效

插入按钮失效是两个低级错误导致的：

• 重复加载jQuery：head里已经引了本地jQuery，body末尾又引了一次其他版本的jQuery。第二次加载会直接覆盖全局的$对象，之前Home.js里给按钮绑的点击事件全被清掉了，点了当然没反应。
• 事件绑定写法不对：初始化时直接给按钮绑定静态事件，后面做下拉切换时用了fadeIn动画、节点显隐操作，这类动态DOM操作很容易把静态绑定的事件搞丢。
• 额外小问题：后续写的内联CSS把原来的.padding类覆盖了，丢失了内边距属性，会导致头部文字贴边，可以顺手修复。

• 删掉body末尾多余的jQuery引入代码，全页只保留head里那一个jQuery引用即可，禁止重复加载。
• 把按钮的直接事件绑定改成事件委托，绑定到不会被删改的顶层节点上，不管后续怎么显隐节点、做动画，事件都不会丢失。
• 补全.padding类里丢失的内边距属性。

Home.js 改动 #

把原来的直接绑定代码：

$('#rogincorporate').click(insertRogIncorporate);

替换为事件委托写法：

$(document).on('click', '#rogincorporate', insertRogIncorporate);

CSS 改动 #

把内联样式里的.padding规则补全：

.padding {
    padding: 15px;
    justify-content: center;
}

HTML 改动 #

直接删掉body末尾那段多余的jQuery加载script标签即可，下拉切换的原有逻辑不需要改动。

改完重新加载加载项就能正常使用，点击按钮会直接在光标位置插入预设文本，切换下拉分类也不会影响按钮功能。

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