Click handler still firing despite preventing propogation/bubbling
0
I have the following click handler for AJAX form submit buttons:
$(document).on('click', '[data-ajax-form] [type="submit"]', function (event) {
event.preventDefault();
console.log('submit form');
});
I also have the following click handler to "confirm" an action:
$(document).on('click', '[data-confirm]', function (event) {
if (!confirm($(this).data('confirm').length ? $(this).data('confirm') : 'Are you sure?')) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
});
Here is the HTML for said button:
<form method="POST" data-ajax-form>
<button type="submit" data-confirm>DELETE</button>
</form>
My problem is that even if I click "cancel" in the confirmation dialog, the click handler for [data-ajax-form] [type="submit"] is still firing.
Is there any way I can stop this?
javascript jquery
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
|
show 2 more comments
0
I have the following click handler for AJAX form submit buttons:
$(document).on('click', '[data-ajax-form] [type="submit"]', function (event) {
event.preventDefault();
console.log('submit form');
});
I also have the following click handler to "confirm" an action:
$(document).on('click', '[data-confirm]', function (event) {
if (!confirm($(this).data('confirm').length ? $(this).data('confirm') : 'Are you sure?')) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
});
Here is the HTML for said button:
<form method="POST" data-ajax-form>
<button type="submit" data-confirm>DELETE</button>
</form>
My problem is that even if I click "cancel" in the confirmation dialog, the click handler for [data-ajax-form] [type="submit"] is still firing.
Is there any way I can stop this?
javascript jquery
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
3
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
1
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Addaction="https://example.com"to yourformand you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.
– Scott Marcus
Nov 23 '18 at 21:23
[data-ajax-form] [type="submit"]and[data-confirm]designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».
– Louys Patrice Bessette
Nov 23 '18 at 21:38
1
Louys was correct, I ended up using the "submit" event for[data-ajax-form] [type="submit"]instead, and refactored the logic accordingly.
– Kevin Dion
Nov 23 '18 at 21:39
1
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31
|
show 2 more comments
0
0
0
I have the following click handler for AJAX form submit buttons:
$(document).on('click', '[data-ajax-form] [type="submit"]', function (event) {
event.preventDefault();
console.log('submit form');
});
I also have the following click handler to "confirm" an action:
$(document).on('click', '[data-confirm]', function (event) {
if (!confirm($(this).data('confirm').length ? $(this).data('confirm') : 'Are you sure?')) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
});
Here is the HTML for said button:
<form method="POST" data-ajax-form>
<button type="submit" data-confirm>DELETE</button>
</form>
My problem is that even if I click "cancel" in the confirmation dialog, the click handler for [data-ajax-form] [type="submit"] is still firing.
Is there any way I can stop this?
javascript jquery
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
I have the following click handler for AJAX form submit buttons:
$(document).on('click', '[data-ajax-form] [type="submit"]', function (event) {
event.preventDefault();
console.log('submit form');
});
I also have the following click handler to "confirm" an action:
$(document).on('click', '[data-confirm]', function (event) {
if (!confirm($(this).data('confirm').length ? $(this).data('confirm') : 'Are you sure?')) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
});
Here is the HTML for said button:
<form method="POST" data-ajax-form>
<button type="submit" data-confirm>DELETE</button>
</form>
My problem is that even if I click "cancel" in the confirmation dialog, the click handler for [data-ajax-form] [type="submit"] is still firing.
Is there any way I can stop this?
javascript jquery
javascript jquery
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
asked Nov 23 '18 at 21:18
Kevin DionKevin Dion
194
194
3
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
1
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Addaction="https://example.com"to yourformand you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.
– Scott Marcus
Nov 23 '18 at 21:23
[data-ajax-form] [type="submit"]and[data-confirm]designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».
– Louys Patrice Bessette
Nov 23 '18 at 21:38
1
Louys was correct, I ended up using the "submit" event for[data-ajax-form] [type="submit"]instead, and refactored the logic accordingly.
– Kevin Dion
Nov 23 '18 at 21:39
1
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31
|
show 2 more comments
3
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
1
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Addaction="https://example.com"to yourformand you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.
– Scott Marcus
Nov 23 '18 at 21:23
[data-ajax-form] [type="submit"]and[data-confirm]designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».
– Louys Patrice Bessette
Nov 23 '18 at 21:38
1
Louys was correct, I ended up using the "submit" event for[data-ajax-form] [type="submit"]instead, and refactored the logic accordingly.
– Kevin Dion
Nov 23 '18 at 21:39
1
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31
3
3
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
1
1
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Add
action="https://example.com" to your form and you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.– Scott Marcus
Nov 23 '18 at 21:23
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Add
action="https://example.com" to your form and you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.– Scott Marcus
Nov 23 '18 at 21:23
[data-ajax-form] [type="submit"] and [data-confirm] designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».– Louys Patrice Bessette
Nov 23 '18 at 21:38
[data-ajax-form] [type="submit"] and [data-confirm] designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».– Louys Patrice Bessette
Nov 23 '18 at 21:38
1
1
Louys was correct, I ended up using the "submit" event for
[data-ajax-form] [type="submit"] instead, and refactored the logic accordingly.– Kevin Dion
Nov 23 '18 at 21:39
Louys was correct, I ended up using the "submit" event for
[data-ajax-form] [type="submit"] instead, and refactored the logic accordingly.– Kevin Dion
Nov 23 '18 at 21:39
1
1
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453030%2fclick-handler-still-firing-despite-preventing-propogation-bubbling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453030%2fclick-handler-still-firing-despite-preventing-propogation-bubbling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Not sure what you're trying to do, but the simplest way to stop it from trying to submit the form and act like a normal button is to change its type to "button" instead of "submit"
– zfrisch
Nov 23 '18 at 21:20
1
You are confusing the event callback with the event itself. Your callback is being called, but the native submit behavior of the form is being cancelled. Add
action="https://example.com"to yourformand you will see that it does not submit and redirect to that location. Event handlers will always fire, you can't cancel them. Event cancellation is about cancelling the native behavior that goes along with event being triggered.– Scott Marcus
Nov 23 '18 at 21:23
[data-ajax-form] [type="submit"]and[data-confirm]designate the same element. So yes, both click handlers are executed. Simple answer is: You can't «stop this».– Louys Patrice Bessette
Nov 23 '18 at 21:38
1
Louys was correct, I ended up using the "submit" event for
[data-ajax-form] [type="submit"]instead, and refactored the logic accordingly.– Kevin Dion
Nov 23 '18 at 21:39
1
I may be preferable that you answer yourself on that one... You can do it (if you didn't know) ;)
– Louys Patrice Bessette
Nov 23 '18 at 22:31