zone.js:140 Uncaught TypeError:无法读取属性'remove'

时间:2017-07-23 19:20:37

标签: javascript jquery html angular kendo-ui

  • 我是kendo ui的新手。
  • 我在小提琴里开发了原型。删除确认窗口工作正常。
  • 但当我整合我的代码库时,我收到错误无法在行pai_to_delete.remove();
  • 行读取属性'remove'
  • 你能告诉我如何解决它。
  • 在下面提供我的代码。

更新

- 我可能没有正确地解释你...当我点击一个链接时,我的ui看起来就像是一个大弹出窗口打开了一个网格......当我点击一个列时 打开带有删除选项的小弹出窗口...当我单击删除选项时,会打开一个确认窗口... - 当我使用原生js确认方法时它工作得很好..我认为那时候它正确引用... - 但是当我使用kendo ui popup时它不能正常工作...... - 当我使用kendo ui时,我的pai_to_delete没有正确引用...因为它指的是div而不是父div我认为是这样。

原型小提琴

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){

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

    });

1 个答案:

答案 0 :(得分:1)

本机确认方法和自定义模式窗口之间的关键区别 - 本机确认方法是同步的。

当方法是同步的并且在本机确认对话框中单击“确定/取消”时,$(".pai-del-menu").blur甚至会发生,但仅在$(".pai-del-menu").click完成后执行,因此一切正常。

当方法是异步的并且您在模态窗口上单击“确定/取消”时,$(".pai-del-menu").blur甚至会立即执行并删除pai_to_delete引用,因此在$(".pai-del-menu").click事件pai_to_delete内部已经null

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

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