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:

1. MouseDown first button
2. Click "No" on div.
3. Check logs (correct "data-id")
4. MouseDown second button
5. Click "No" on div.
6. Check logs (INcorrect "data-id" - still first one)

CodePudding user response：

The issue is that you're binding a new click event to the #inside and #not-in every time .btn is clicked. Adding the e.preventDefault() and e.stopImmediatePropogation() calls are just masking this behavior. You can fix this problem by removing all previous click events before binding a new one.

$('.btn').on('mousedown touchstart', function (e) {
    let button = $(this);
    console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
    
    timer = setTimeout(async function() {
    $('#make-sure-location').show();
    
    $('#not-in').off('click').on('click', function(e) {
      console.log('not in location: ', button.attr('data-treatment-id'));
      $('#make-sure-location').hide();
      clearTimeout();
    });

    $('#inside').off('click').on('click', function(e) {
      console.log('on location: ', button.attr('data-treatment-id'));
    });
    
  }, 2000)
})

button {
      font-size: 12px;
    width: initial;
    height: initial;
    padding: 5px 14px;
    font-weight: 500;
    margin: 10px auto 0;
    
    background: transparent;
    box-shadow: inset 0 0 0 1px #46a4fb;
    z-index: 0;
    -webkit-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -moz-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -o-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -ms-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    color: #46a4fb;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

#make-sure-location {
  background-color: lightgray;
  margin-top: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  data-treatment-id=1>
Hey, click me to use me!
</button>

<button  data-treatment-id=2>
Hey, click me to use me!
</button>

  <div id="make-sure-location"  style="padding: 30px;">
    <p  style="margin-top: 0;margin-bottom: 14px;">Make sure you're at the front desk.</p>
    <div>
      <button id="inside">Yes!</button>
      <button id="not-in" style=" background: transparent; color: #646464; margin: 0 auto; padding: 0; text-decoration: underline;">No.</button>
    </div>
  </div>