I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE: I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.
As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});