CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
lenny
lenny

Reputation: 241

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?

Upvotes: 2

Views: 70332

Answers (2)

carl-lopez
carl-lopez

Reputation: 582

You might be having 2 elements with the same id in the html and you are getting the event triggered when you are clicking on the other element.

Upvotes: 5

Skrivener
Skrivener

Reputation: 1023

Try adding the following to your jQuery code:

evt.stopPropagation();

Sorry, should clarify, add this to the code triggering the modal opening.

Edit: since you don't have direct access to the modal code, try the following in your jQuery:

$('#add-event-modal').on('click', function(evt) {
    evt.stopPropagation();
});

Upvotes: 0

Related Questions