Jquery click event for button is not working inside ng-if div

Question

I have following code snippet in my project

<div class="form-horizontal well text-center" id="func_85" ng-if="prmissionlist.indexOf('chkfunction_85') >= 0">
    <button class="btn btn-primary" type="button" id="btn_branch_save">
        Save
    </button>
    <button class="btn btn-primary" type="button" id="btn_new_branchcancel">
        CANCEL
    </button>
</div>

But the button click is not working inside the ng-if div (button click is written in js file using jQuery selector.)

I think it is because the div is added dynamically, can you please share your button click script?, So that I can help better — Gokulan P H, Jun 30 '17 at 10:15
yes, most likely jquery tries to bind the click event when the div (and its content, i.e. the button) is not yet on the page. Also, I'd suggest to stick with angular and use ng-click — emanek, Jun 30 '17 at 10:17
I agree. At the moment the jquery statement tries to attach a click event the button is most certainly not created by ng-if. Try ng-show or ng-hide instead of ng-if, just to prove the case. ng-show and ng-hide to not modify the DOM and are always present in DOM at any time. — TSungur, Jun 30 '17 at 10:19
@TSungur ng-show is working, but for requirement is to implement with ng-if — Krishnakumar g, Jun 30 '17 at 10:21
@emanek Is there any way to do it with ng-if and jquery selector — Krishnakumar g, Jun 30 '17 at 10:24
@GokulanPH `$('#btn_branch_save').click(function () { alert('dsfds');});` — Krishnakumar g, Jun 30 '17 at 10:25
@Krishnakumarg ng-show was just meant to prove the problem. Like emanek said, use ng-if and use ng-click instead of jquery — TSungur, Jun 30 '17 at 10:28
Possible duplicate of [AngularJS: ng-if not working in combination with ng-click?](https://stackoverflow.com/questions/19812116/angularjs-ng-if-not-working-in-combination-with-ng-click) — Ramesh Rajendran, Jun 30 '17 at 10:34
If you are still looking for answer, please try this. It solved my problem: https://stackoverflow.com/a/18876600/1997983 — Rakesh Burbure, Nov 29 '17 at 06:27

score 1 · Answer 1 · edited Feb 19 '19 at 07:31

This problem occurs because ng-if dynamically adds the element to DOM if the condition is true, the jquery Direct event (.click()) can't be added to dynamically added elements so you have to use delegate event (.on()) to make it work on dynamically added elements.

Refer link for more informations on direct and delegate events

Replace your Jquery click event with .on()

$('.form-horizontal').on('click','#btn_branch_save',function(){

alert('dsfds');

});

As an alternative, you can also use ng-show which will create the element when the DOM is loaded and just will apply visibility as hidden, however it is always good to use delegate events in Jquery.

But still, I wonder why you are in need to use Jquery and Angular together which is not much good practice.

Ramesh Rajendran · Answer 2 · 2017-06-30T10:30:33.753

0

The button doesn't work because of the nested scopes created by ng-if.

from your comment: @TSungur ng-show is working, but for requirement is to implement with ng-if

You can use ng-show instead of ng-if, because it's just solve the problem for now this time.

Jquery click event for button is not working inside ng-if div

3 Answers3