单击不使用TXTextControl HTML5编辑器自定义选项卡的事件侦听器
单击不使用TXTextControl HTML5编辑器自定义选项卡的事件侦听器
提问于 2016-01-04 20:57:53
我使用一个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>回答 1
Stack Overflow用户
发布于 2016-01-05 19:14:46
通过添加style=‘指针-events: all；到img标记属性来解决问题。现在就会引发事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34599710
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号