Freeze / Engine crash selecting TWO dimensions (backend.api)

[ForgotMyOldUsername]

So two questions really   -  something janky is going on with my selection method ( non-angular )  and the click function.

Here's the code     - I store the values to filter in the div as custom attributes that are read by the click function, which mostly works but ( A ) sometimes gets stuck in an inescapable loop (short of closing tab ) and ( B )  though the filter values per dimension are reported correctly in the console log, when the 'Selection' is applied , it picks a different number ( inconsistently ) 

I can find scant documentation that isn't angular based - which I'm trying to avoid as I'd prefer to do it with a single script and 'vanilla' JS. 

Update :  Is there a better method to select from / filter  both dimensions in one call? 

$(document).on('click', '.numbers', function(e){
       //console.log('I clicked on ' + e.target.id );
       var xdim = parseInt($(this).attr('foo'));
       var ydim = parseInt($(this).attr('bar'));
       console.log(hc.qDimensionInfo[0].qFallbackTitle + ':' + xdim + ' // ' +hc.qDimensionInfo[1].qFallbackTitle + ':' + ydim );
       self.backendApi.selectValues(0, [xdim],true);  // Filter 1 ( dim 0  / x )
       self.backendApi.selectValues(1, [ydim],true); // Filter 2  ( dim 1 / y ) 

});

[ForgotMyOldUsername]

There's a really neat tutorial here which I followed, which works for one dimension, but things go awry with two or more.

Is it POSSIBLE to select more than one dim, do the API calls need to be daisy-chained to only fire once the first call has had a response?

http://opensrc.axisgroup.com/tutorials/extensions/104.%20Make%20it%20Selectable.html

[ForgotMyOldUsername]

So I don't know if there's another method , but it seems the backend is calling paint when executed, hence the weirdness when trying to apply two filters.

Has anyone managed to select / filter two dimensions at once?

[ForgotMyOldUsername · Accepted solution]

For anyone searching in the future, the issue wasn't the backend api so much , as it was a jquery issue.
TL:DR - include an OFF element AND an ON element for handing mouse events that fire Selections.

This effectively makes it 'trigger once' . 

The only changes I made were to specify the element ID and add 'off' like so : 

$element.off('mouseup', '.'+m_id).on('mouseup', '.'+m_id, function(e){
	
	// Get attributes into array 
	var sel_x=[parseInt($(this).attr('xdm'))];
	var sel_y=[parseInt($(this).attr('ydm'))];
	
	if (sel_y.length > 0) self.backendApi.selectValues(1, sel_y,false);
	if (sel_x.length > 0) self.backendApi.selectValues(0, sel_x,false);

});	

Hopefully this saves someone spending a few hours searching forums for issues with the backendAPI