Javascript 点击自定义html点击删除joint js节点的问题

我在angular.js应用程序中使用joint.js，我在joint.js节点中使用html

<button class="delete">x</button>

当用户单击节点时将添加，当用户单击纸张时将删除。但当我执行添加和删除类的逻辑时，它可以工作，但删除交叉按钮上节点的功能停止了

通过一整天的调试和修改代码，我得出了这样一个结论：当调用这个函数时

   f2:function(){
                     var self=this;
                     var elementDiv = $(self.$box).find('button');
                     elementDiv.parent().removeClass("showButton")
              }

删除交叉按钮点击上的节点停止。这意味着图标与模型删除功能的绑定被删除。这是装订

this.$box.find('.delete').on('click', function()
                    self.model.remove();
                });

我希望这个解释有一定的道理。下面是完整的代码

   var graph = new joint.dia.Graph;
    var element1=false;
    var paper = new joint.dia.Paper({
        el: $('#workFlow'),
        width: '100%',
        height: '98%',
        model: graph,
        gridSize: 1
    });
    paper.on('cell:pointerdown',
        function(cellView, evt, x, y) {
            $scope.cellView=cellView;
            cellView.f1();
        }
    );
    paper.on('blank:pointerdown', function(cell) {
      $scope.cellView.f2();
    });

用于扩展形状的主干视图

 joint.shapes.html = {};
        joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
            defaults: joint.util.deepSupplement({
                type: 'html.Element',
                attrs: {
                    rect: { stroke: 'none', 'fill-opacity': 0,stageType: dataSourceType}
                }
            }, joint.shapes.basic.Rect.prototype.defaults)
        });

//为该元素创建一个自定义视图，在其上方显示一个HTML div。 //-------------------------------------------------------------------------

joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [

            '<span class="glyphicons '+icon+' html-element">',
        '<button class="delete">x</button>',
        '</span>'

    ].join(''),

    initialize: function() {
        var self=this;
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        this.$box = $(_.template(this.template)());
        //  this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.delete').on('click', function(event){
            self.model.remove();
        });
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);
        this.updateBox();
    }
    ,
    render: function() {
        var self=this;
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        this.updateBox();
        return this;
    },

    updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    },
    f1:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().addClass("showButton");
    },
    f2:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().removeClass("showButton")

    }
});

var el1 = new joint.shapes.html.Element({ position: { x: $scope.shapeX, y: $scope.shapeY }, size: { width: 40, height: 40 }, label: 'I am HTML', select: 'one' });
graph.addCells([el1]);

joint.shapes.html.ElementView=joint.dia.ElementView.extend({
模板：[
'',
“x”，
''
].加入（“”），
初始化：函数（）{
var self=这个；
_.bindAll（这是“updateBox”）；
joint.dia.ElementView.prototype.initialize.apply（这是参数）；
this.$box=$（u.template（this.template）（）；
//这是.box.find（'.delete'）。在（'click'，u.bind（this.model.remove，this.model））；
此.$box.find（'.delete'）.on（'click'，函数（事件）{
self.model.remove（）；
});
//每当基础模型更改时，更新框位置。
this.model.on（'change'，this.updateBox，this）；
//当模型从图形中移除时，移除该框。
this.model.on（'remove'，this.removeBox，this）；
这个.updateBox（）；
}
,
render:function（）{
var self=这个；
joint.dia.ElementView.prototype.render.apply（这是参数）；
此.paper.$el.prepend（此.$box）；
这个.updateBox（）；
归还这个；
},
updateBox:function（）{
//设置长方体的位置和尺寸，使其覆盖JointJS元素。
var bbox=this.model.getBBox（）；
//使用存储在单元模型中的数据更新HTML的示例。
这个.box.css（{width:bbox.width，height:bbox.height，left:bbox.x，top:bbox.y，transform:'rotate++（this.model.get（'angle'）| | 0）+'deg'）；
},
移除框：功能（evt）{
此.$box.remove（）；
},
f1：函数（）{
var self=这个；
var elementDiv=$（self.$box）.find（'button'）；
elementDiv.parent（）.addClass（“showButton”）；
},
f2：函数（）{
var self=这个；
var elementDiv=$（self.$box）.find（'button'）；
elementDiv.parent（）.removeClass（“showButton”）
}
});
var el1=new joint.shapes.html.Element（{位置：{x:$scope.shapeX，y:$scope.shapeY}，大小：{width:40，height:40}，标签：'I am html'，选择：'one'}）；
图1.addCells（[el1]）；

如果您还没有解决您的问题：有一个非常简单的解决方案可以解决您想要做的事情。您只需在css样式中使用hover函数，并在将鼠标悬停在框上（在css文件中）时将不透明度从0更改为1：

---

是不是很难理解？？有人愿意回答吗？谢谢你调查我的问题。。。我已经尝试过你的解决方案，它确实有效…但问题是它仍然保留在dom中，即使它的不透明度为0，所以如果用户意外单击该区域，元素将被删除。。。即使没有显示十字符号。

joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [

            '<span class="glyphicons '+icon+' html-element">',
        '<button class="delete">x</button>',
        '</span>'

    ].join(''),

    initialize: function() {
        var self=this;
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        this.$box = $(_.template(this.template)());
        //  this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.delete').on('click', function(event){
            self.model.remove();
        });
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);
        this.updateBox();
    }
    ,
    render: function() {
        var self=this;
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        this.updateBox();
        return this;
    },

    updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    },
    f1:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().addClass("showButton");
    },
    f2:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().removeClass("showButton")

    }
});

var el1 = new joint.shapes.html.Element({ position: { x: $scope.shapeX, y: $scope.shapeY }, size: { width: 40, height: 40 }, label: 'I am HTML', select: 'one' });
graph.addCells([el1]);

.html-element button.delete {
   color: white;
   border: none;
   background-color: gray;
   border-radius: 20px;
   width: 15px;
   height: 15px;
   line-height: 15px;
   text-align: middle;
   position: absolute;
   top: -5px;
   left: -5px;
   padding: 0;
   margin: 0;
   font-weight: bold;
   cursor: pointer;
   opacity:0;
}
.html-element button.delete:hover {
   /*width: 20px;
   height: 20px;
   line-height: 20px;*/
   opacity:1;
}