如何取消绑定 jstree select_node 事件

Question

我有一个用于管理工作分解结构的 jstree。所需的功能是用户单击节点，然后弹出一个模式，其中包含一个表单文本字段。然后用户可以重命名该节点。当他们在模式中提交表单时，树会刷新为新名称。我所拥有的一切都可以达到树刷新的程度。当树刷新时...模态关闭但重新打开。我相信从节点解除绑定点击事件是需要发生的事情？这是代码。

select节点点击事件

    $('.activity_div').on("select_node.jstree", function (e, data) { 
        var val     = data.node.id;
        var act_id  = val.substr(val.indexOf("_") + 1);
        //alert("node_id: " + data.node.id); 
        $.ajax({
            url: 'cfc/cfc_wbs.cfc?method=func_get_activity_code_details&returnformat=json',
            type: 'post',
            dataType: 'json',
            data: { 
                est_id:     estimate_id,
                act_id:     act_id
            },
            success: function(data){
                if(data && data.length) { 
                    var html            = "";
                    $.each(data, function(i, val) {
                        var status              = data[i].status;
                        var message             = data[i].message;
                        var text                = data[i].text;
                        var id                  = data[i].id;
                        var node                = data[i].node;
                        if (status == 'SUCCESS'){
                            $('#edit_modal').modal();
                            $('#node_text').val(text);
                            $('#node_id').val(id);
                            $('#node').val(node);

                        }
                    })
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                var errorMsg = 'Ajax request failed: ' + xhr.responseText;
                $('#content').html(errorMsg);
              }
        });
    });

模态表单提交事件

// FORM VALIDATION
$('#form_activity_code').validate();    
    // EDIT FORM SUBMISSION
    $('#form_activity_code').on('click', '.btn-node-submit', function (e) {
        if($("#form_activity_code").valid()){
            var node_id         =   $('#node_id').val();
            var node            =   $('#node').val();
            var node_text       =   $('#node_text').val();
            $.ajax({
                url: 'cfc/cfc_wbs.cfc?method=func_update_activity_codes&returnformat=json',
                type: 'post',
                dataType: 'json',
                data: { 
                    act_id:         node_id,
                    est_id:         estimate_id,
                    node_text:      node_text,
                    node:           node
                },
                success: function (data) {
                    if(data && data.length) { 
                        var html            = "";
                        $.each(data, function(i, val) {
                            var status              = data[i].status;
                            //var message               = data[i].message;
                            //var activity              = data[i].activity;
                            //var activity_date_time    = data[i].activity_date_time;
                            //var person                = data[i].person;
                            //var user                  = data[i].user;
                            if (status == 'SUCCESS'){
                                $('#activity_codes_div').jstree(true).settings.core.data = data;
                                $('#activity_codes_div').jstree(true).refresh();
                                $('#edit_modal').modal('toggle');
                                return false;
                            } else {
                            }
                        });
                    }
                }
            });
        } else {
        }
    });

Answer 1

您可以使用事件隐藏模态 refresh.jstree

$("#activity_codes_div").on("refresh.jstree",function(){
    $('#edit_modal').modal('hide');
});

看起来像是 $('#activity_codes_div').jstree(true).refresh(); 行阻止 bootstrap 模态对话框出于某种原因关闭，而不是您认为与 select 节点有关的问题如果您从 $('#form_activity_code').on('click', '.btn-node-submit', function (e) { 事件中删除上述行，您将看到模式隐藏并正常工作。

使用事件 refresh.jstree 隐藏模态框解决了问题，请参阅工作 fiddle

或下面的片段

var data = [{
    "state": {
      "opened": true
    },
    "text": "engineering",
    "icon": "fa fa-circle-o",
    "children": [{
        "state": {
          "opened": true
        },
        "text": "piping",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "stainless steel",
          "icon": "fa fa-dot-circle",
          "children": [{
            "state": {
              "opened": true
            },
            "text": "small bore",
            "icon": "fa fa-billseye"
          }]
        }]
      },
      {
        "state": {
          "opened": true
        },
        "text": "structural",
        "icon": "fa fa-dot-circle-o",
        "children": []
      },
      {
        "state": {
          "opened": true
        },
        "text": "civil",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "deep foundations",
          "icon": "fa fa-dot-circle",
          "children": []
        }]
      }
    ]
  },
  {
    "state": {
      "opened": true
    },
    "text": "procurement",
    "icon": "fa fa-circle-o",
    "children": [{
        "state": {
          "opened": true
        },
        "text": "piping",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "stainless steel",
          "icon": "fa fa-dot-circle",
          "children": [{
            "state": {
              "opened": true
            },
            "text": "small bore",
            "icon": "fa fa-billseye"
          }]
        }]
      },
      {
        "state": {
          "opened": true
        },
        "text": "structural",
        "icon": "fa fa-dot-circle-o",
        "children": []
      },
      {
        "state": {
          "opened": true
        },
        "text": "civil",
        "icon": "fa fa-dot-circle-o",
        "children": []
      }
    ]
  }
]

$('.activity_div').on("select_node.jstree", function(e, data) {
  var val = data.node.id;
  var act_id = val.substr(val.indexOf("_") + 1);
  //alert("node_id: " + data.node.id); 
  $('#edit_modal').modal();
  return false;
});

$("#activity_codes_div").on("refresh.jstree", function() {

  $('#edit_modal').modal('hide');
})

// EDIT FORM SUBMISSION
$('#form_activity_code').on('click', '.btn-node-submit', function(e) {
  e.preventDefault();

  $('#activity_codes_div').jstree(true).settings.core.data = data;

  $('#activity_codes_div').jstree(true).refresh();

  return false;
});

$('#activity_codes_div').jstree({
  'core': {
    'data': data,
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-lg-6">
        <div class="ibox float-e-margins">
          <div class="ibox-title">
            <h5>Activity Codes</h5>
            <div class="ibox-tools">
              <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
              </a>
              <a class="close-link">
                <i class="fa fa-times"></i>
              </a>
            </div>
          </div>
          <div class="ibox-content">

            <div id="activity_codes_div" class="activity_div"></div>

          </div>
        </div>
      </div>
      <!--- /////////////////////////////// EDIT MODAL ///////////////////////////////////// --->
      <div class="modal inmodal" id="edit_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content animated fadeIn">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <div id="approve_image"><i class="fa fa-sitemap modal-icon"></i></div>
              <h4 class="modal-title" id="requisition_description">Edit Activity Code</h4>
              <small>Edit </small>
              <h6 class="modal-title" id=""></h6>
            </div>
            <form id="form_activity_code">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="form-group">
                      <label>Node Desciption</label>
                      <input name="text" type="text" placeholder="Enter node description" class="form-control required" id="node_text">
                    </div>
                  </div>
                </div>
                <input type="hidden" name="node_id" id="node_id" value="0">
                <input type="hidden" name="node" id="node" value="0">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-white approve_close_modal" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-node-submit">Edit</button>
                <button type="button" class="btn btn-danger delete">Delete</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>


  </div>

</body>

</html>

如何取消绑定 jstree select_node 事件

how to unbind jstree select_node event

jquery

bootstrap-modal

jstree