While using ng-repeat to generate li elements, I encountered an issue with the click event of a button inside the LI. Instead of triggering the button's click event, the LI's click event is fired.
I have tested this in a js fiddle where it works correctly. However, in my code, I cannot identify the source of the problem. You can find the working fiddle link here:
http://jsfiddle.net/rahulrathore1986/udmcv/296/
The HTML code snippet is as follows:
<ul id="ulClaimantId" class="TabbedPanelsTabGroup">
<li ng-repeat="claimantDetail in claimantDetailsList" class="TabbedPanelsTab_01" tabindex="0" id="{{claimantDetail.claimantId}}" tabdata="{{claimantDetail.selectedClaimObject}}" attachedworkgroup="{{claimantDetail.Id}}" firstli="{{claimantDetail.firstLi}}" ng-click="OpenWorkGroupTab(claimantDetail.claimantId);">{{claimantDetail.Id}}
<input type="image" id="btnClose_{{claimantDetail.Id}}" src="Content/Images/close-popup.png" style="float:right;margin-left:2px;" data-ng-click="fn_btnClose(claimantDetail.claimantId,$event)" >{{claimantDetail.claimantId}}</input>
</li>
</ul>
The controller scope functions are defined in the same controller and look like this:
// Function for closing the tab and removing it from the HTML
$scope.fn_btnClose = function (mint_tabId, e) {
// Function logic goes here...
}
// Function to open the WorkGroup view on tab click
$scope.OpenWorkGroupTab = function (tabId) {
// Function logic goes here...
}