I have multiple buttons that can be clicked by mousedown/touchstart, after 2 seconds, you get a popup to make sure, and you can click “yes” or “no”.
The issue comes when you click one, then select “no” and click another one. When logging the “data-id”, the first one clicked is the one passed, instead of the clicked one.
I thought this was an event.preventDefault(), event.stopImmediatePropagation issue, but this is not helping me at all, I don’t know what else to try anymore or know WHY this is happening.
Here’s a preview of the JS file:
$('.btn').on('mousedown touchstart', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
let button = $(this);
console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
timer = setTimeout(async function() {
$('#make-sure-location').show();
$('#not-in').on('click', function(e) {
console.log('not in location: ', button.attr('data-treatment-id'));
e.preventDefault();
e.stopImmediatePropagation();
$('#make-sure-location').hide();
clearTimeout();
});
$('#inside').on('click', function(e) {
console.log('on location: ', button.attr('data-treatment-id'));
e.preventDefault();
e.stopImmediatePropagation();
});
}, 2000)
})
Here’s a working fddle:
https://jsfiddle.net/rj8ofLym/28/
To recreate issue:
- MouseDown first button
- Click “No” on div.
- Check logs (correct “data-id”)
- MouseDown second button
- Click “No” on div.
- Check logs (INcorrect “data-id” – still first one)
