zone.js:140 未捕获的类型错误:无法读取属性 'remove' [英] zone.js: 140 Uncaught TypeError: Cannot read property 'remove'

问题描述

• 我是剑道用户界面的新手.
• 我用我的小提琴开发了原型.删除确认窗口在那里工作正常.
• 但是当我集成到我的代码库中时，我收到错误无法读取 pai_to_delete.remove(); 行处的属性remove"；
• 你们能告诉我如何修复它吗.
• 在下面提供我的代码.

更新

- 可能是我没有正确地解释你......当我点击一个链接时，我的用户界面看起来是什么样的一个带有删除选项的小弹出窗口打开......当我点击删除选项时，一个确认窗口打开......- 当我使用本机 js 确认方法时，它工作正常..我认为那个时间是正确的......- 但是当我使用 kendo ui popup 时它不能正常工作......- 当我使用 kendo ui 时，我的 pai_to_delete 是否没有正确指代...因为它指的是那个 div 而不是我认为是父 div.

-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.

原型小提琴

http://jsfiddle.net/amu6tw2a/

• 整个代码我无法粘贴到我的问题中，所以我粘贴在小提琴中，我粘贴在下面的相关代码

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();

});

使用 js 原生确认方法

$(".tiger").bind("click", function(e) {

$(".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.

当方法是同步的并且您在原生确认对话框中单击确定/取消时，$(".pai-del-menu").blur 甚至会发生，但仅在 $(".pai-del-menu").click 已完成，所以一切正常.

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.

当方法是异步的并且你在模态窗口点击确定/取消时，$(".pai-del-menu").blur甚至会发生并立即执行，删除pai_to_deletecode> 引用，所以在 $(".pai-del-menu").click 事件 pai_to_delete 里面已经是 null.

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.

您所需要的只是在创建 kendoWindow 之前将 pai_to_delete 分配给另一个变量，并在 $(".pai-del-menu") 中使用它.点击事件:

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 未捕获的类型错误:无法读取属性 'remove'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！