Click event not working properly in joint js

Question

I got this joint js rect with a custom class :

var rectdetail= new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><rect class="inner"/></g><text/></g>',
    position: { x: 450, y: y_value +10},
    size: { width: 130, height: 35 },
    attrs: { 
        ".inner": { fill: '#333','stroke-width': 0  },
        text: {
            text: 'View detail',
            fill: 'white'
        }
    }
});

And i adde a click event so it open a modal :

$(document).on('click', '.inner', function () {
    var id = $(this).attr('id');
    //alert(id);
    $('#myModal1').modal('show');
});

Thing is, my click event only works when i click outside the text 'View detail' that's inside the rect, how can i solve this ?

Thanks in advance !

Answer 1

You could use the jointjs specific event handlers as mentioned here:

How to add an onclick event to a joint.js element?

paper.on('cell:pointerclick', 
    function(cellView, evt, x, y) {
       var id = cellView.model.id;
       $('#myModal1').modal('show');
    }
);