scope function inside li element is not getting called

Question

I am generating li using ng-repeat and inside that LI i have input type control which has a scope function fn_btnClose .When i am clicking on button button's click event not getting called and instead li's click event gets fired.

I am doing the same thing in js fiddle and it's working there but in my code i am not finding where is the problem.The working fiddle link is

http://jsfiddle.net/rahulrathore1986/udmcv/296/

The html is as below

<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>

my Controller scope functions are in same controller and is like this

// Function for closing the tab and it will remove the tab from HTML
    $scope.fn_btnClose = function (mint_tabId, e) {
        console.log('fnbtnCclobse');
        if (mint_tabId != undefined) {
            angular.element("#" + mint_tabId).remove();
            //get the corresponding close button id and then remove it
            var close = "btnClose_" + mint_tabId.replace('liClaimant', '');
            angular.element("#" + close).remove();

            var inComingTab = this.findAndRemove($scope.ClaimantArrayList, 'claimantId', mint_tabId.replace('liClaimant', ''));

            //$scope.ClaimantArrayList.splice(mint_tabId.replace('liClaimant', ''), 1);

            if ($scope.ClaimantArrayList.length == 0) {
                //If all tabs are closed then hide claim detail div.
                $('#dvRustClaimantDetail').hide();
                $('#dvBasicFullAdvSearch').show();
            }
            else {
                //populate the data of next claimant tab
                if ($scope.ClaimantArrayList != undefined && $scope.ClaimantArrayList.length > 0) {
                    inComingTab = "liClaimant" + inComingTab;
                    this.fn_populateTabWdObject(angular.fromJson(angular.element('#' + inComingTab).attr('tabdata')),
                                             inComingTab,
                                            angular.element('#' + inComingTab).attr('attachedworkgroup'),
                                            angular.element('#' + inComingTab).attr('firstli'));
                }
            }
        }
        e.stopPropagation();
    }


 ////this function will open the WorkGroup detail div for the tab that has been clicked
    $scope.OpenWorkGroupTab = function (tabId) {
        console.log('OpenWorkGroupTab');
        if (($('#ulClaimantId li').length == 0)) {
            // $('#dvRustClaimantDetail').hide();
            if (tabId == 'liHomeTab') {
                $('#dvBasicFullAdvSearch').show();
            }
            else {
                //$('#dvRustClaimantDetail').hide();
                // $('#dvBasicFullAdvSearch').hide();
            }
            //return false;
        }
        $('#dvRustClaimantDetail').show();
        //Add Close button html for the tabs added
        angular.element('#ulClaimantId li').each(function () {
            var $this = $(this);
            var text = $this.html();
            text = text.replace('&lt;', '<').replace('&gt;', '>');
            $this.html(text);
        });


        $('[tabviewdiv]').hide();
        if (tabId == 'liHomeTab') {
            $('#dvBasicFullAdvSearch').show();
        }
        else {
            var claimantObject = angular.fromJson(angular.element('#' + tabId).attr('tabdata'));
            //check if selected Tab is WorkGroup tab then append ClaimantTabid to tabId argument
            if (tabId.toLowerCase().indexOf('workgroup') > 0) {
                tabId = "liClaimant" + claimantObject.ID;
            }
            //Gets the Claimant Extra Info and Populates the tab Data
            this.ClaimantExtraInformation(claimantObject.ID);
            this.fn_populateTabWdObject(angular.fromJson(angular.element('#' + tabId).attr('tabdata')), tabId,
             angular.element('#' + tabId).attr('attachedworkgroup'),
             angular.element('#' + tabId).attr('firstli'),
             $scope.claimantExtraInfoObject);
        }
    }

Looking at your code I strongly recommend to remove jQuery completely from the project and rewrite everything until it's too late. This is not *angular* code. Read this: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — dfsq, Jan 05 '16 at 16:36
@dfsq: Thanks for ur suggestion ,I will try to apply ur suggestion but this time can you help me out what problem my code have.It would be a great help. — rahul rathore, Jan 05 '16 at 18:22
@Mosh Feu: You have removed my original HTML and AngularJS code where i have the problem.The JS fiddle code is working fine but the same thing i was doing in my original code and that was not working .But now the original code is not here — rahul rathore, Jan 05 '16 at 18:32
From top of my head I can think of one issue. CSS might be decreasing the size of button or shifting the `z-index` and made LI the only clickable element — maurycy, Jan 06 '16 at 08:37
@Maurycy: I have increased the Z-index of my button but that's also not working.Any more suggestion for this ? — rahul rathore, Jan 06 '16 at 13:48
try adding css: `li{border: 1px solid red} li > input {border: 1px solid blue}` you will see the rectangles of both elements — maurycy, Jan 06 '16 at 13:50
@MauryCy: have applied the border on my li and input element blue button border is coming inside li's red border.but that does not make the inpt function getting called! — rahul rathore, Jan 06 '16 at 13:54
The z-index solution was also my thought. Did you make sure to give `position: relative` or `position: absolute` to the items you gave z-index to? — austinthedeveloper, Jan 07 '16 at 16:15
So, do you can **put your code** to jsfiddle and reproduce error? — Grundy, Jan 16 '16 at 16:55
@Grundy: This issue has been resolved .I was using some JS code inside that function and due to that click function was not getting called.I had applied your suggestion into my code.Thanks Grundy for your help — rahul rathore, Jan 18 '16 at 15:43

score 1 · Accepted Answer · answered Jan 05 '16 at 17:14

1

You need to have a stopPropagation() on the button's ng-click:

<li ng-repeat="item in items" ng-click="OpenWorkGroupTab(item);">Text of Li
      <input type="button" value="btn" style="margin-left:1px;" ng-click="fn_btnClose(item,$event);$event.stopPropagation();">
</li>

answered Jan 05 '16 at 17:14

austinthedeveloper

2,401
19
27

He already has `stopPropagation()` included in `$scope.fn_btnClose` - is there a difference between your version and his? – Foreign Object Jan 05 '16 at 17:17
This is the way I normally write nested clicks in my apps and haven't had a problem. I did however miss the sentence saying that the jsfiddle version worked fine. – austinthedeveloper Jan 05 '16 at 17:31
@AustinTheDeveloper :Thanks for your response . in jsFiddle it's working fine and the same i want to do with my code but that's not working .In my code whether i click on Close button OR on LI in both cases only li's click event is being fired and not the one that is on close button. – rahul rathore Jan 05 '16 at 18:12
In my case the attached function on input element inside Li's does never get called.every time only li's function gets called. – rahul rathore Jan 06 '16 at 14:33

scope function inside li element is not getting called

1 Answers1

Linked