CODEWITHSUNDEEP
jqueryangularjstwitter-bootstrap
Rodrigue
Rodrigue

Reputation: 169

Access elements in bootstrap modal with jquery

I am using this angular-bootstrap modal.

Its content:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-body">
          <button id="my_button">Alert</button>
    </div>
</script>

I have tried these two options:

$("#my_button").click(function(){
    alert("ALERT");
})

$("#my_button").on("click", function(){
    alert("ALERT");
})

How to get access to that button?

Upvotes: 1

Views: 652

Answers (1)

Yannis
Yannis

Reputation: 6157

Wiht Angular JS you should be using ng-click to link event handlers to your buttons.

Like:

<a ng-click="iWillClick()">Click me</a>

Will execute the iWillClick function of your scope (in your relevant controller). Check this out to understand how ng-click works.

So in your case, if your footer is:

<div class="modal-footer ng-scope">
   <button ng-click="ok()" class="btn btn-primary">OK</button>
   <button ng-click="cancel()" class="btn btn-warning">Cancel</button>
</div>

will execute the ok() function on OK and the cancel() function on cancel. Both of those should be on your controller.

If for any reason you would like to use normal jQuery for your event handlers you should do

$(".modal-footer .btn-primary").on("click", function(){
    alert("OK");
});

$(".modal-footer .btn-warning").on("click", function(){
    alert("CANCEL");
});

Upvotes: 1

Related Questions