图单击事件侦听器在TXTextControl HTML5编辑器的自定义选项卡上不起作用

Question

我正在使用TXTextControl博客之一中提供的代码在其HTML5编辑器上创建用于合并代码的自定义标签。 我们正在从版本16升级到版本22，并拥有我们自己的自定义合并代码，并通过Web服务提取数据，并且出于显而易见的原因，我们希望将该系统保留在原位。 我的自定义标签上有一个用于合并代码组的下拉菜单，该菜单会驱动所选组内第二次合并代码的下拉菜单。 用户可以通过单击带有加号或减号的img添加或删除合并代码。 一切就绪-下拉列表运行良好，但我似乎无法将加号img绑定到click事件。 我已经尝试过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&nbsp;&nbsp;";
            sCustomTabContent += "                          <select id='ddlMergeCodeGroup'></select>&nbsp;&nbsp;";
            sCustomTabContent += "                          Merge Code&nbsp;&nbsp;";
            sCustomTabContent += "                          <select id='ddlMergeCode'></select>&nbsp;&nbsp;";
            sCustomTabContent += "                          <img id='insertField' src='images/Plus.png' alt='Add' height='20' width='20'></img>&nbsp;&nbsp;";
            sCustomTabContent += "                          <img id='deleteField' src='images/minus.png' alt='Delete' height='20' width='20'></img>&nbsp;&nbsp;";
            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>

Answer 1

通过添加style ='pointer-events：all;来解决 img标签属性。 点击事件现在引发。

图单击事件侦听器在TXTextControl HTML5编辑器的自定义选项卡上不起作用

问题描述

1 个解决方案

解决方案1
0 2016-01-05 19:14:46

图单击事件侦听器在TXTextControl HTML5编辑器的自定义选项卡上不起作用

问题描述

1 个解决方案

解决方案1 0 2016-01-05 19:14:46

解决方案1
0 2016-01-05 19:14:46