Img Click Event Listener Not Working On Custom Tab Of TXTextControl HTML5 Editor
Question
I am using code provided in one of the TXTextControl blogs to create a custom tab for merge codes on their HTML5 editor. 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. 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. Everything is in place - the dropdowns are working beautifully, but I cannot seem to bind the plus sign img to a click event. I've tried both jQuery and Javascript (commented out in the code snippet). 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. 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>
1 answers
solution1
0 2016-01-05 19:14:46
Solved by adding style='pointer-events: all; to img tag attributes. Click event is raised now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.