javascript - Stop immediate propogation within AJAX success method -

here code:

$(document).on('click', '[data-submit-form]', function (event) {     var form = $(this).closest('form');      $.ajax({         url : form.attr('action'),         type : 'post',         data: form.serialize(),         async: false,         success: function (data) {             if ($.type(data) === 'object') {                 alert_errors(form, data);                 event.stopimmediatepropagation()             }         }     }); }); 

this uses ajax check server errors when button clicked. if there errors, returns object containing errors. in case of error, want stop other events occurring on clicked button. example, button used close modal. want stop happening if there errors.

this not working @ all. seems event.stopimmediatepropagation() has no effect on other events of button after alert shown.

the problem here has nothing synchronous or asynchronous code.

yes, if ajax call asynchronous problem, because event delegation synchronous , not wait ajax call return. call synchronous, since set async: true.

the real underlying problem here time.

the http request making -- though synchronous since set async: false -- takes time complete, , time has completed, event delegation of browser has happened, event.stopimmediatepropagation() has no effect.

ideally, need move event.stopimmediatepropagation spot, so:

$(document).on('click', '[data-submit-form]', function (event) {     var form = $(this).closest('form');      event.stopimmediatepropagation(); // here      $.ajax({         url : form.attr('action'),         type : 'post',         data: form.serialize(),         async: false,         success: function (data) {             if ($.type(data) === 'object') {                 alert_errors(form, data);                 // event.stopimmediatepropagation() not here             }         }     }); }); 

edit

your current approach not ideal way trying do, because modal close , form submit logic tightly coupled since they're in same click event.

instead of having submit form click event closes modal, should make process more granular separate functions:

• one handle click event of button , submit form
• one close modal, can called anywhere

with approach, code can stay , call closemodal function inside success callback, so:

// default, not close modal anymore. must explicitly // call 'closemodal' want, e.g. in ajax success callback. // type of granularity more flexible , save headache. $(document).on('click', '[data-submit-form]', function (event) {     var form = $(this).closest('form');      $.ajax({         url : form.attr('action'),         type : 'post',         data: form.serialize(),         async: false,         success: function (data) {             if ($.type(data) === 'object') {                 alert_errors(form, data);                 closemodal(); // close modal             }         }     }); }); 

an approach cleaner because functionality grows , grows, you're going keep finding more , more weird scenarios in want call preventdeafult, stoppropagation, stopimmediatepropagation, , on, , guarantee run same problem again result. mess.

save hassle now.