2

Using a bootstrap modal, i want to register an event-handler both for the modal and the following submit-button inside this modal.

Invoking the modal and closing ist subsequently leads to multiple execution of the #modalSubmitButton event. Could you think of any solution to prevent that behaviour and only fire on the actual event, ignoring previous invocations of the modal ? Is my approach of nesting the handlers maybe wrong ?

I already tried all combinations of event.stopPropagation / event.unbind(), etc. 

$(document).on('click', '#myModalID' function () {

    // i fetch some data from the clicked element here
    //  and make it accessible to the subsequent eventHandler

        $(document).on('click', '#modalSubmitButton' function () {

            // eventually calling service on click of button
            invokeService()
    });
});
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
lespaula
  • 23
  • 2

1 Answers1

1

Simple fix: don't nest event handlers. With the implementation of delegated event handlers (which you're already using) there is no need to.

$(document).on('click', '#myModalID' function () {
    // i fetch some data from the clicked element here
    //  and make it accessible to the subsequent eventHandler
});

$(document).on('click', '#modalSubmitButton' function () {
    // eventually calling service on click of button
    invokeService()
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Hi Rory, thx for your quick response. I wanted to pass some data as a parameter to the next handler. I didn't find a solution how i can pass params from function/event-handler A --> B without actually calling it. Any idea ? – lespaula Mar 11 '15 at 19:53
  • You can't actually pass parameters between event handlers. You could use a variable within scope of both handlers, or set a `data` attribute on the element which can be read from both. – Rory McCrossan Mar 11 '15 at 21:26