Value inside of callback is not being updated on each function call
<p>I have a pretty simple function as shown below.  This deletes a users slip after confirming that's what they want to do (note the custom <code>confirm</code>).  Inside the callback function on confirm, <code>id</code> gets set correctly the first time, but is never updated after that.</p>

<p>If I <code>console.log</code> inside of the <code>deleteSlip</code> function, <code>id</code> is always correct.  If I <code>console.log</code> inside of the callback, it's always the first <code>id</code> I send it.  I see the same thing when I debug the javascript.  The value is correct the first time, but never updates after that.</p>

<p>What do I need to do to get the value inside the callback function to update when it updates in <code>deleteSlip</code>?</p>

<pre><code>function deleteSlip(id){
    //  id is correct right here
    confirm('This will delete your slip.  Are you sure you want to do this?', function(confirmed){
        //  id here is always the first value from deleteSlip, and never changes
        if (confirmed)
        {
          // do stuff 
        }
    });
}
</code></pre>

<p>The <code>confirm</code> being called is custom and is defined below:</p>

<pre><code>window._originalConfirm = window.confirm;
window.confirm = function(text, cb) {
  bootStrapConfirm = function() {
    if(! $.fn.modal.Constructor)
      return false;
    if($('#windowConfirmModal').length == 1)
      return true;
    $('body').append(' \
    &lt;div id="windowConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"&gt; \
      &lt;div class="modal-body"&gt; \
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; \
        &lt;p&gt; alert text &lt;/p&gt; \
      &lt;/div&gt; \
      &lt;div class="modal-footer"&gt; \
        &lt;button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"&gt;No&lt;/button&gt; \
        &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;Yes&lt;/button&gt; \
      &lt;/div&gt; \
    &lt;/div&gt; \
    ');
    function unbind() { 
      $("#windowConfirmModal .btn-primary").unbind('click', confirm);
      $("#windowConfirmModal .btn-danger").unbind('click', deny);
    }
    function confirm() { cb(true); delete cb;}
    function deny() { cb(false); delete cb;}
    $("#windowConfirmModal .btn-primary").bind('click', confirm);
    $("#windowConfirmModal .btn-danger").bind('click', deny);
    return true;
  }
  if ( bootStrapConfirm() ){
    $('#windowConfirmModal .modal-body p').text(text);
    $('#windowConfirmModal').modal();
  }  else {
    console.log('bootstrap was not found');
    window._originalConfirm(text);
  }
}
</code></pre>

<p><code>deleteSlip</code> is an <code>onclick</code> HTML attribute on a button.  Like so:</p>

<pre><code>onclick="deleteSlip(1234)"
</code></pre>

<p>Again, to reiterate, the <code>id</code> inside of <code>deleteSlip</code> is correct.  The <code>id</code> inside of the callback on the <code>confirm</code> is whatever it gets first and never changes.  The callback may be async, but I'm only calling it once at any given time.  <code>deleteSlip</code> is fired on button click.</p>

<p>I posted this question before and was told it was too ambiguous.  Please let me know what you need to see to help me work through this.  The "do stuff" area has an ajax call, but the value is wrong before that (thus not showing it for people who don't read the entire question).</p>

<p><strong>Update</strong>:
It looks like this is an issue with the custom <code>confirm</code>.  I change the custom <code>confirm</code> to be the following:</p>

<pre><code>window.confirm = function(text, cb) {
  bootStrapConfirm = function() {
    if(! $.fn.modal.Constructor)
      return false;
    if($('#windowConfirmModal').length == 1)
      return true;
    $('body').append(' \
      &lt;div id="windowConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"&gt; \
      &lt;div class="modal-body"&gt; \
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; \
        &lt;p&gt; alert text &lt;/p&gt; \
      &lt;/div&gt; \
      &lt;div class="modal-footer"&gt; \
        &lt;button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"&gt;No&lt;/button&gt; \
        &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;Yes&lt;/button&gt; \
      &lt;/div&gt; \
      &lt;/div&gt; \
    ');
    return true;
  }
  if ( bootStrapConfirm() ){
    function confirm() { cb(true); }
    function deny() { cb(false); }
    $("#windowConfirmModal .btn-primary").unbind('click', confirm);
    $("#windowConfirmModal .btn-danger").unbind('click', deny);
    $("#windowConfirmModal .btn-primary").bind('click', confirm);
    $("#windowConfirmModal .btn-danger").bind('click', deny);
    $('#windowConfirmModal .modal-body p').text(text);
    $('#windowConfirmModal').modal();
  }  else {
    console.log('bootstrap was not found');
    window._originalConfirm(text);
  }
}
</code></pre>

<p>Now when <code>confirm</code> is called, it calls ALL the <code>id</code>'s it's ever seen.  Something I'm not <code>unbind</code>ing properly?</p>
