[英]Img Click Event Listener Not Working On Custom Tab Of TXTextControl HTML5 Editor
I am using code provided in one of the TXTextControl blogs to create a custom tab for merge codes on their HTML5 editor. 我正在使用TXTextControl博客之一中提供的代码在其HTML5编辑器上创建用于合并代码的自定义标签。 We are upgrading from version 16 to 22 and have our own custom merge codes in place, with a web service to pull in data, and, for obvious reasons want to keep this system in place. 我们正在从版本16升级到版本22,并拥有我们自己的自定义合并代码,并通过Web服务提取数据,并且出于显而易见的原因,我们希望将该系统保留在原位。 My custom tab has a dropdown for merge code groups which drives a second dropdown of merge codes within the selected group. 我的自定义标签上有一个用于合并代码组的下拉菜单,该菜单会驱动所选组内第二次合并代码的下拉菜单。 Users add or delete merge codes by clicking on an img with either a plus or minus sign. 用户可以通过单击带有加号或减号的img添加或删除合并代码。 Everything is in place - the dropdowns are working beautifully, but I cannot seem to bind the plus sign img to a click event. 一切就绪-下拉列表运行良好,但我似乎无法将加号img绑定到click事件。 I've tried both jQuery and Javascript (commented out in the code snippet). 我已经尝试过jQuery和Javascript(在代码段中注释了)。 I am making sure that the custom tab itself is loaded before attempting the bind, but to no avail. 我确保自定义选项卡本身正在尝试绑定之前加载,但无济于事。 Absolutely nothing happens when I click the Plus.png image. 当我单击Plus.png图像时,绝对没有任何反应。 Anyone see the problem? 有人看到问题了吗? Thanks in advance for any input! 预先感谢您的任何投入!
Mike 麦克风
<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>
Solved by adding style='pointer-events: all; 通过添加style ='pointer-events:all;来解决 to img tag attributes. img标签属性。 Click event is raised now. 点击事件现在引发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.