zone.js：140未捕获TypeError：无法读取属性'remove' [英] zone.js: 140 Uncaught TypeError: Cannot read property 'remove'
问题描述
- 我是kendo ui的新手。
- 我在我的小提琴中开发了原型。删除确认窗口在那里正常工作。
- 但是当我在我的代码库中集成时，出现错误无法在行pai_to_delete.remove（）; 处读取属性'remove' b $ b
- 你们可以告诉我如何解决这个问题。
- 在下面提供我的代码。
已更新
- 可能是我没有正确解释您的情况...当我点击某个链接时，一个大的弹出窗口打开一个网格......在那个网格中，当我点击一列时
a带有删除选项的小弹出窗口打开了......当我点击删除选项时，一个确认窗口打开...
- 当我使用本地js确认方法它工作正常..我认为那时候它的引用正确...
- 但是当我使用kendo ui popup时它不能正常工作...
- 是我的pai_to_delete当我使用kendo ui时没有正确引用......因为它指的是那个div而不是父div我认为是这样。
原型小提琴
- 整个代码我不是能粘贴在我的问题中，所以我粘贴在小提琴中，我粘贴在下面的相关代码
https://jsfiddle.net/44tLx225/
< pre class =lang-or-tag-here prettyprint-override>
zone.js：140 Uncaught TypeError：无法读取属性'删除'
在HTMLButtonElement.eval处为null
（游泳 - jumpings.ts：990）
在HTMLDocument.dispatch（jQuery - 2.2.3。 js：4737）
at HTMLDocument.elemData.handle（jquery - 2.2.3。js：4549）
ZoneDelegate.invokeTask（zone.js：236）
Zone.runTask（zone .js：136）
at HTMLDocument.ZoneTask.invoke（zone.js：304）
$ b $（。tiger）。bind（click，function e）{
让= this;
$（。pai-del-menu ）.blur（function（）{
$（this）.hide（）;
pai_to_delete = null;
}）;
$（。pai- （）函数（）{
$（this）.hide（）;
//让popup = $（＃deletePopup）。data（kendoWindow）。center （）.open（）;
if（pai_to_delete！= null）{
// $（'。addELFDocumentForm'）。show（）;
// alert（你确定你';
var kendoWindow = $（< div />）。kendoWindow（{
title：Confirm，
resizable ：false，
modal：true，
height：100，
width：400
}）;
kendoWindow .data（kendoWindow）
.content（$（＃delete-confirmation）。html（））
.center（）。open（）;
$ b $（跳转）.on（click，#playerDocumentOk，function（）{
pai_to_delete.remove（）;
kendoWindow.data（kendoWindow） .close（）;
}）
$（跳转）.on（click，#playerDocumentCancel，function（）{
kendoWindow.data （kendoWindow）。close（）;
}）
//pai_to_delete.remove（）;
}
}）;
var record_x = e.pageX;
var record_y = e.pageY - $（。navHeaderBox）。height（） - $（。breadCrumbBox）。height（） - 20; （b
$（。pai-del-menu））。
$（。pai-del-menu）。fadeIn（200）;
$（。pai-del-menu）。show（）;
$（。pai-del-menu）。attr（'tabindex'，-1）.focus（）;
pai_to_delete = $（this）.parent（）。parent（）;
}）;
使用js本地确认方式
<$> $（。tiger）。bind（click，function（e）{
$）
$（。pai-del-menu）。click（function（）{
$（this）.hide（）;
如果（pai_to_delete！== null）{
// alert（您确定要删除所选文档）;
// confirm（您确定要删除选定的文档）;
var r = confirm（您确定要删除所选文档）;
if（r == true）{
// txt = ;您按OK！;
pai_to_delete.remove（）;
} else {
// txt =您按下取消！;
}
// pai_to_delete.remove（）;
}
}）;
var pai_x = e.pageX;
var pai_y = e.pageY - $（。navHeaderBox）。height（） - $（。breadCrumbBox）。height（） - 20;
$（.pai-del-menu）.css（{
left：pai_x，
top：pai_y
}）;
$（。pai-del-menu）。fadeIn（200）;
$（。pai-del-menu）。show（）;
$（。pai-del-menu）。attr（'tabindex'，-1）.focus（）;
pai_to_delete = $（this）.parent（）。parent（）;
}）;
原生确认方法和自定义模态窗口 - 本地确认方法是同步的。
当方法是同步的并且您在本地确认对话框中单击Ok / Cancel时， $（。pai-del-menu）。blur 甚至会发生，但只有在 $（。pai-del-menu）后才会执行，点击完成，所以一切正常。
当方法是异步的并且您在模式窗口上单击确定/取消时， $（。pai-del-menu）。blur 甚至会立即执行并删除 pai_to_delete 引用，因此在 $（。pai-del-menu）中单击事件 pai_to_delete 已经是 null 。
您只需在 kendoWindow 创建之前将 pai_to_delete 赋值给另一个变量，并在 $（.pai-del-menu）。click event：
$（ （）; $ b $（this）.hide（）;
pai_to_delete = null;
}）; （）。
$ b $（。pai-del-menu）。click（function（）{
$（this）.hide（）;
if（pai_to_delete！= null） {
var paiToDelete = pai_to_delete; //< ----
var kendoWindow = $（< div />）。
resizable：false，
modal：true，
height：100，
width：400
}）;
kendoWindow.data（ （）;
.content（$（＃delete-confirmation）。html（））
.center（）。open（）;
$（跳转） .on（click，#playerDocumentOk，function（）{
paiToDelete.remove（）; //< ----
kendoWindow.data（kendoWindow）。close（） ;
$）;
$（跳转）.on（click，#playerDocumentCancel，function（）{
kendoWindow.data（kendoWindow）。close （）;
}）;
}
}）;
- I am new to kendo ui.
- I developed prototype in my fiddle. delete confirmation window is working fine there.
- but when I integrate in my codebase I am getting error Cannot read property 'remove' at the line pai_to_delete.remove();
- can you guys tell me how to fix it.
- providing my code below.
updated
-may be I did not explain you properly...how my ui looks is when I click a link a big popup opens with a grid...in that grid when i click a column a small popup with delete option opens up...when I click the delete option a confirmation window opens... - when I use native js confirm method it works fine..I think that time its referring correctly... - but when I use kendo ui popup it does not work fine... - is my pai_to_delete not referring properly when I use kendo ui...since its referring to that div not the parent div i think so.
prototype fiddle
- whole code I am not able to paste in my question so I am pasting in fiddle, relevant code I am pasting below
https://jsfiddle.net/44tLx225/
zone.js: 140 Uncaught TypeError: Cannot read property 'remove'
of null
at HTMLButtonElement.eval(swimming - jumpings.ts: 990)
at HTMLDocument.dispatch(jquery - 2.2.3. js: 4737)
at HTMLDocument.elemData.handle(jquery - 2.2.3. js: 4549)
at ZoneDelegate.invokeTask(zone.js: 236)
at Zone.runTask(zone.js: 136)
at HTMLDocument.ZoneTask.invoke(zone.js: 304)
$(".tiger").bind("click", function(e) {
let that = this;
$(".pai-del-menu").blur(function() {
$(this).hide();
pai_to_delete = null;
});
$(".pai-del-menu").click(function() {
$(this).hide();
//let popup = $("#deletePopup").data("kendoWindow").center().open();
if (pai_to_delete != null) {
//$('.addELFDocumentForm').show();
//alert("Are you sure you want to delete the selected jumping");
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
height: 100,
width: 400
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();
$(jumping).on("click", "#playerDocumentOk", function() {
pai_to_delete.remove();
kendoWindow.data("kendoWindow").close();
})
$(jumping).on("click", "#playerDocumentCancel", function() {
kendoWindow.data("kendoWindow").close();
})
//pai_to_delete.remove();
}
});
var record_x = e.pageX;
var record_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;
$(".pai-del-menu").css({
left: record_x,
top: record_y
});
$(".pai-del-menu").fadeIn(200);
$(".pai-del-menu").show();
$(".pai-del-menu").attr('tabindex', -1).focus();
pai_to_delete = $(this).parent().parent();
});
works with js native confirm method
$(".tiger").bind("click", function(e) {
$(".pai-del-menu").blur(function() {
$(this).hide();
pai_to_delete = null;
});
$(".pai-del-menu").click(function() {
$(this).hide();
if (pai_to_delete !== null) {
//alert("Are you sure you want to delete the selected document");
//confirm("Are you sure you want to delete the selected document");
var r = confirm("Are you sure you want to delete the selected document");
if (r == true) {
//txt = "You pressed OK!";
pai_to_delete.remove();
} else {
//txt = "You pressed Cancel!";
}
//pai_to_delete.remove();
}
});
var pai_x = e.pageX;
var pai_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;
$(".pai-del-menu").css({
left: pai_x,
top: pai_y
});
$(".pai-del-menu").fadeIn(200);
$(".pai-del-menu").show();
$(".pai-del-menu").attr('tabindex', -1).focus();
pai_to_delete = $(this).parent().parent();
});
The key difference between native confirm method and custom modal window - native confirm method is synchronous.
When method is synchronous and you clicks Ok/Cancel in native confirm dialog, $(".pai-del-menu").blur even occurs, but executes only after $(".pai-del-menu").click was finished, so everything works fine.
When method is asynchronous and you clicks Ok/Cancel on modal window, $(".pai-del-menu").blur even occurs and executes immediately, removing pai_to_delete reference, so inside $(".pai-del-menu").click event pai_to_delete is already null.
All you need is to assign pai_to_delete to another variable right before kendoWindow creation and use it inside $(".pai-del-menu").click event:
$(".pai-del-menu").blur(function() {
$(this).hide();
pai_to_delete = null;
});
$(".pai-del-menu").click(function() {
$(this).hide();
if (pai_to_delete != null) {
var paiToDelete = pai_to_delete; // <----
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
height: 100,
width: 400
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();
$(jumping).on("click", "#playerDocumentOk", function() {
paiToDelete.remove(); // <----
kendoWindow.data("kendoWindow").close();
});
$(jumping).on("click", "#playerDocumentCancel", function() {
kendoWindow.data("kendoWindow").close();
});
}
});
这篇关于zone.js：140未捕获TypeError：无法读取属性'remove'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
