javascript - element.blur() 导致 Uncaught TypeError : elem. getAttribute 不是函数

Question

所以我很难理解控制台错误的来源。目前它不会破坏任何行为，但该错误令人不安。当我在正在编辑的跨度上触发 .blur() 时，会发生错误。然后 Jquery 提示“jquery.js:1451 Uncaught TypeError: elem.getAttribute is not a function”

指令 html:

<span ng-if="!time">{{ value }}</span>
<button class="btn btn-primary delink" 
        ng-if="delinkable && delinkVisable" 
        ng-click="resource.delink()">Not speaking</button>
<span ng-if="time">{{ value | momentFormat }}</span>
<div ng-if="time && datepicker" class="dropdown" id="datepicker">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <datetimepicker ng-model="resource.MeetingDateTime" 
                    data-on-set-time="updateResource()"
                    data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }">
    </datetimepicker>
</ul>
<a class="dropdown-toggle" id="dropdown2" role="button" data-disabled="true"
   data-toggle="dropdown" data-target="#" href>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</a>

相关链接功能:

function handleChanges () {
    var editSpan = angular.element(element.children()[0]);
    var newValue;

    if (scope.time) {
        newValue = dates.makeDateTime(editSpan.text());
        if (newValue) {
            scope.resource[scope.property] = newValue;
            newValue = editSpan.text();
        } else {
            editSpan.text(oldValue);
            newValue = editSpan.text();
            scope.resource[scope.property] = dates.makeDateTime(editSpan.text());
            scope.datepicker = true;
            $('#dropdown2').trigger('click');
            scope.$digest();
        }
    } else {
        scope.resource[scope.property] = editSpan.text();
        newValue = editSpan.text();
    }

    if (newValue !== oldValue) {
        scope.updateResource();
        compileElement();
    } else {
        if (scope.time) {
           hideDatepicker();
        }
    }
}

function bindEvents () {
    var editSpan = angular.element(element.children()[0]);

    editSpan.on('blur', function () {
        editSpan.attr('contentEditable', false);
        editSpan.unbind('keydown');
        editSpan.unbind('blur');
        scope.editing = false;
        handleChanges();
    });
    editSpan.on('keydown', function(event){
        if (event.keyCode == 27) {
            event.preventDefault();
            editSpan.text(oldValue);
            editSpan.blur(); //The error seems to happen after this call
        } else if (event.keyCode == 13) {
            editSpan.blur(); //and after this call
        } else if (scope.deleteable && event.keyCode == 8) {
            if (editSpan.text().length == 0 || event.ctrlKey) {
                scope.delete();
            }
        }
    });
}

Answer 1

所以我不知道这个答案的普遍性如何，但如果它对您有用，问题是由于编译函数而发生的。

基本上，compileElement 正在用新编译的实例替换 Span 的原始绑定(bind)实例，因此当 Jquery 最终尝试重新绑定(bind)单击函数时，该元素不再存在，即使其中存在相同的 Span地方。

解决方案是更新原始跨度的值，而不是使用 $compile 重新编译元素。