JQuery mouse onclick inside angularjs
I am working with a page that uses both JQuery and AngularJS. Using the jQuery taggable-text.js plugin I can select the "Share-with" elements with my mouse and keyboard.
But when I try to select items inside the table (in the AngularJS scope), I can only do it with keyboard keys.
Can anyone tell why the onclick event is not firing in the AngularJS scope, but others?
The following events have been attached (lines 296-303 in the JSFiddle JS block):
this.listView = new ListView($list, this);
this.strategies = strategies;
this.$el.on('keyup', bind(this.onKeyup, this));
this.$el.on('keydown', bind(this.listView.onKeydown, this.listView));
this.$el.on('mousedown', bind(this.listView.onKeydown, this.listView));
this.$el.on('keydown', bind(this.onKeydown, this));
this.$el.on('keydown', 'button', bind(this.onButtonKeydown, this));
this.$el.on(fireChangeOn, bind(this.onChange, this));
Here is a link to a JSFiddle where you can see the complete code.
source to share
Here is one possible workaround for the mouse click issue. You can manually bind and handle the OnMouseDown event. The code is available in the JSFiddle:
http://jsfiddle.net/k455Lx3f/7/
I added the isAngularJS variable to the code. When this variable is set to "true", the onClickAngularJS function will be added, otherwise the source's onClick function (lines 602-613):
var ListView = (function() {
function ListView($el, completer, isAngularJS) {
this.$el = $el;
this.index = 0;
this.completer = completer;
if (!isAngularJS) {
this.$el.on('click', 'li.textcomplete-item', bind(this.onClick, this));
} else {
this.$el.on('mousedown', 'li.textcomplete-item > a', bind(this.onClickAngularJS, this));
}
}
...
plus you need a function to handle the click (on the anchor element) (lines 721-730):
onClickAngularJS : function(e) {
var $e = $(e.target);
e.originalEvent.keepTextCompleteDropdown = true;
if(!$e.hasClass('textcomplete-item')) {
$e = $e.parents('li.textcomplete-item');
}
var selectedIndex = parseInt($e.data('index'));
this.completer.onSelect(this.data[selectedIndex]);
e.preventDefault();
}
...
and finally you need to specify the isAngularJS parameter in config (lines 766-770):
...
var isAngularJS = false;
if (config.isAngularJS && config.isAngularJS === true) {
isAngularJS = true;
}
new Completer(this, config.strategies, fireChangeOn, isAngularJS);
...
source to share