Bootstrap modal dialog button click event triggering on modal open

I am working on an application and need to open a `modal`, have the user fill in some details and save them once they click the modal button i have designated. I have used `jQuery` `on` to bind a `click` event for the button. problem is the click event is triggered when the modal opens. Relevant parts of modal: ``` <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary" id="save-event">Save Event</a> ``` Where i bind the event: ``` $('#save-event').on( 'click', function(evt) { console.log('triggered'); } ); ``` The console shows 'triggered' when i open the dialog. I open the dialog through: ``` <a href="#add-event-modal" role="button" class="btn" data-toggle="modal">{% trans "Event also occurs on" %}</a> ``` Its a Django app so the curly braces. Any ideas what i could be doing wrong or is there another way to execute some logic once the user clicks the relevant button?