How do I capture the click event after the change event that the overlay displays?
I created a sandboxed version of my code in a jsfiddle: http://jsfiddle.net/yn183v6e/5/
$(document).ready(function() {
$('body').on('click', 'span', function() {
$('#content').append('Click on span<br/>');
});
$('#input').on('change', 'input', function(e) {
$('#content').append('Change<br/>');
$('p').show();
});
$('body').on('click', 'p', function(e) {
$(this).hide();
});
$('body').on('click', function(e) {
$('#content').append('Click on body<br/>');
});
});
There is a change event in the input box that displays the overlay. When you enter an input field, then click the Go button, the change event is fired and the click event is lost. If there was no overlap, the click event will be captured just fine. With the overlay, the click event is lost.
I have attached a click event to the body, overlay and button, but the click event was not captured.
The overlay and edit event in the input field is required to enforce current business rules. How can I capture the click event?
source to share
Use an event mousedown
to fire it before the event change
oninput
Working example: http://jsfiddle.net/yn183v6e/7/
$(document).ready(function() {
$('body').on('mousedown', 'span', function() { // Changed click event for mousedown event
$('#content').append('Click on span<br/>');
});
$('#input').on('change', 'input', function(e) {
$('#content').append('Change<br/>');
$('p').show();
debugger;
});
$('body').on('click', 'p', function(e) {
$(this).hide();
});
$('body').on('click', function(e) {
$('#content').append('Click on body<br/>');
});
});
source to share
The problem is not the event click
, but the allmighty <p>
that you are putting in the event change
.
Since it starts first change
, when blurring the input, p
is placed above everything, and yours is span
never reached by pressing ...
The body click is triggered because it <p>
is part of the body anyway ...
Uninstall $('p').show();
and see: http://jsfiddle.net/yn183v6e/6/
source to share