我正在使用其中一个 TXTextControl 博客中提供的代码在其 HTML5 编辑器上为合并代码创建自定义选项卡。我们正在从版本 16 升级到 22，并拥有我们自己的自定义合并代码，并使用 Web 服务来提取数据，并且出于显而易见的原因希望保留该系统。我的自定义选项卡有一个合并代码组的下拉菜单，它驱动所选组内的第二个合并代码下拉菜单。用户通过单击带有加号或减号的 img 来添加或删除合并代码。一切就绪-下拉菜单运行良好，但我似乎无法将加号 img 绑定到单击事件。我已经尝试过 jQuery 和 Javascript（在代码片段中注释掉了）。我是确保在尝试绑定之前加载自定义选项卡本身，但无济于事。当我单击 Plus.png 图像时，绝对没有任何反应。有人看到问题了吗？提前感谢您的任何意见！
麦克风
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
function loadDDLMergeCodeGroups() {
$(document).ready(function () {
$("#ddlMergeCodeGroup").load("MergeCodeGroups.txt");
});
}
function loadDDLMergeCodes() {
$("#ddlMergeCodeGroup").change(function() {
$("#ddlMergeCode").load(encodeURI("textdata/" + $(this).val() + ".txt"));
});
}
function addInsertFieldEvent() {
$("#insertField").bind('click', function() {
alert('Hello!');
});
}
//function addInsertFieldEvent() {
// document.getElementById("insertField").addEventListener('click', function (e) {
// alert('hello');
// });
//}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:TextControl ID="TextControl1" runat="server" Dock="Window" />
<script type="text/javascript">
// elements can be only added when the ribbon is completely loaded
TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
addTab();
loadDDLMergeCodeGroups();
loadDDLMergeCodes();
addInsertFieldEvent();
});
// this function adds a new tab and the tab content page
function addTab() {
sCustomTab = "<li><a onclick='activateCustomTab();' id='tabCustom' data-applicationmodes='0' tabindex='-1' href='#!'>Merge Codes</a></li>";
// add the new tab after the 'View' tab
document.getElementById('tabView').parentElement.insertAdjacentHTML(
'afterend', sCustomTab);
sCustomTabContent = "<div id='ribbonTabCustom' class='tab-content' style='display: none;'>";
sCustomTabContent += "<div id='ribbonGroupCustom' class='ribbon-group'>";
sCustomTabContent += " <div class='ribbon-group-content'>";
sCustomTabContent += " <div class='ribbon-group-content-row'>";
sCustomTabContent += " <div class='ribbon-group-button-group'>";
//sCustomTabContent += " <div onclick='BtnCustomAction()' id='BtnCustom' class='ribbon-button ribbon-button-big' title='Custom'>";
//sCustomTabContent += " <div class='ribbon-button-big-image-container'><img id='imgID_RibbonTabInsert_html_0' class='ribbon-button-big-image' src='custom.png'></img></div>";
sCustomTabContent += " <div class='ribbon-button-big-label-container'>";
sCustomTabContent += " <p class='ribbon-button-label'>Merge Code Group ";
sCustomTabContent += " <select id='ddlMergeCodeGroup'></select> ";
sCustomTabContent += " Merge Code ";
sCustomTabContent += " <select id='ddlMergeCode'></select> ";
sCustomTabContent += " <img id='insertField' src='images/Plus.png' alt='Add' height='20' width='20'></img> ";
sCustomTabContent += " <img id='deleteField' src='images/minus.png' alt='Delete' height='20' width='20'></img> ";
sCustomTabContent += " </p>";
sCustomTabContent += " </div>";
//sCustomTabContent += " </div>";
sCustomTabContent += " </div>";
sCustomTabContent += " </div>";
sCustomTabContent += " </div>";
//sCustomTabContent += " <div class='ribbon-group-label-container'>";
//sCustomTabContent += " <p class='ribbon-group-label'>asdf</p>";
//sCustomTabContent += " </div>";
sCustomTabContent += "</div>";
sCustomTabContent += "</div>";
// add the tab content to the tab content container
document.getElementById('txRibbonTabContentContainer').insertAdjacentHTML(
'afterbegin', sCustomTabContent);
}
function activateCustomTab() {
$('div.tab-content').css("display", "none");
$('ul.tabs a').removeClass("selected");
$("#ribbonTabCustom").css("display", "inline-block");
$("#tabCustom").addClass("selected");
}
</script>
</div>
</form>