添加到 HTML 输入的事件监听器的 Keyup-Event 不会在 keyup 上触发

Question

我正在开发一个 Ionic-tabs-app。 在我的一个模板中，我得到了一个名为“div_mask_content”的 div——我在其中加载了一个掩码——包含一些标签和输入——通过设置 div 的 InnerHtml 属性。 因为在设置 InnerHtml 属性后重新解析了 div，所以我必须像这样更新输入元素的 keyup 事件：

element.addEventListener('ng-keyup', $scope.onKeyUp);

我使用一个函数来执行此操作，该函数尝试将事件侦听器添加到要在 keyup 上调用的函数中。 不幸的是，永远不会调用 onKeyUp 函数，我不明白为什么。 所以我尝试在我的 Ionic-template 中添加一个硬编码的输入，它通过它的 ng-keyup-event 调用函数 onKeyUp，这可以按预期工作：

<input ng-keyup="onKeyUp()" />

这是我的模板：

<ion-view view-title="Account">
    <ion-content>
        <div>
            <input ng-keyup="onKeyUp()" />
        </div>
        <div>
            <div id="div_mask_content"></div>
        </div>
        <div class="bar-footer">
            <ul class="list">
                <li class="row">
                    <div class="col">
                        <div class="text-center" style="margin-top:10px">
                            <ion-button id="btn_load_mask"
                                        class="button button-large button-positive"
                                        ng-click="load_mask()">Load mask</ion-button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </ion-content>
</ion-view>

以及来自控制器的代码：

.controller('MyCtrl', function($scope) {

    // EventHandler for keyup-Event
    $scope.onKeyUp = function () {
        alert("keyup-Event was fired");
    };

    // Content der Maske wird geladen und Events wiederhergestellt
    $scope.load_mask = function () {
        var div_mask_content = document.getElementById("div_mask_content");

        if (div_mask_content != null) {
            alert("The content of the mask is loading");
            var mask_content = "<div id='content' class='list'><div class='item item-input-inset'><label>Value</label><input id='27' name='p16003_value' type='text' maxlength='7' placeholder='___,__' title='Please use format ###,##' pattern='^[+-]?\d{0,3}((\.|,)\d{1,2})?' /></div><div class='item item-input-inset'><label></label></div><div class='item item-input-inset'><label></label><input id='28' name='p16003_result' type='text' disabled maxlength='7' placeholder='___,__' title='Please use format ###,##' pattern='^[+-]?\d{0,3}((\.|,)\d{1,2})?' /></div></div>";
            div_mask_content.innerHTML = mask_content;

            // Renews the keyup-EventHandles of the input-elements
            renewKeyupEventHandle(div_mask_content);
        }

    };

    // Function for renewing the keyup-EventHandles of the input-elements
    var renewKeyupEventHandle = function (element) {
        if (element.nodeName == "INPUT") {
            // Here the function onKeyUp is added to the Event ng-keyup but will never be fired
            element.addEventListener('ng-keyup', $scope.onKeyUp);
        }

        if (element.hasChildNodes()) {
            for (var n = 0; n < element.childElementCount; n++) {
                renewKeyupEventHandle(element.childNodes.item(n));
            }
        }

    };

});

我不得不猜测我实际上有点困惑。 任何帮助将不胜感激。

Answer 1

这将起作用：

element.addEventListener('keyup', $scope.onKeyUp);

（'ng-keyup'不是原生JS事件）

但你最好使用“角度方式”

<input ng-keyup="onKeyUp()" />