圖單擊事件偵聽器在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