javascript - 区域.js : 140 Uncaught TypeError: Cannot read property 'remove'

Question

• 我是剑道用户界面的新手。
• 我在我的 fiddle 中开发了原型(prototype)。删除确认窗口在那里工作正常。
• 但是当我集成到我的代码库中时，我在行 pai_to_delete.remove(); 处收到错误 Cannot read property 'remove'
• 你们能告诉我如何解决吗？
• 在下面提供我的代码。

已更新

- 可能是我没有正确解释你......当我点击一个链接时我的用户界面看起来如何打开一个带有网格的大弹出窗口......当我点击一个列时在那个网格中 将打开一个带有删除选项的小弹出窗口...当我单击删除选项时，将打开一个确认窗口... - 当我使用 native js 确认方法时它工作正常..我认为它的引用正确...... - 但是当我使用 kendo ui 弹出窗口时它不能正常工作...... - 当我使用 kendo ui 时，我的 pai_to_delete 是否没有正确引用...因为它引用的是那个 div 而不是我认为的父 div。

原型(prototype) fiddle

http://jsfiddle.net/amu6tw2a/

• 我无法将整个代码粘贴到我的问题中，所以我粘贴了 fiddle ，相关代码我粘贴在下面

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原生confirm方法

$(".tiger").bind("点击", 函数(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();

    });

Answer 1

原生 confirm 方法和自定义模态窗口之间的主要区别 - 原生 confirm 方法是同步的。

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

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

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

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