title: Why is this callback handler being called twice?
body: <p>So I have the following JavaScript code. When the user clicks a button on the page, it reads the "name" and "stepId" from data attributes, and then opens a Twitter bootstrap modal dialog. When the "Clear" button is clicked on the dialog, it fires the supplied callback.</p>
  
  <p>This works great the first time it is invoked. The problem is that on all subsequent invocations, when clicking the "Clear" button, the callback is fired twice. On the first callback we see the <code>stepId</code> from the first invocation, and on the second callback we see the <code>stepId</code> from the current invocation.</p>
  
  <p><code>clearInputTargetName</code> and <code>clearInputName</code> are always the correct value in the dialog.</p>
  
  <pre><code>var Dialog = function (dlgId)
  {
     var okCallback = null;
  
     var show = function (cb)
     {
        okCallback = cb;
  
        jQuery.noConflict();
        $(dlgId).modal("show");
     };
  
     var hide = function ()
     {
        jQuery.noConflict();
        $(dlgId).modal("hide");
     };
  
     var onOK = function ()
     {
        okCallback();
     };
  
     var init = function ()
     {
        $(dlgId + " .okButton").off('click').on('click', function ()
        {
           onOK(true);
           hide();
        });
     };
  
     init();
  
     return {
        show: show,
        hide: hide,
        init: init
     };
  };
  
  var ClearInputDialog = function ()
  {
     var show = function (input, cb)
     {
        var dlg = new Dialog("#clearInputDialog", input);
  
        $("#clearInputTargetName").text(input);
        $("#clearInputName").text(input);
  
        dlg.show(function ()
        {
           cb(true);
           dlg.hide();
        });
     };
  
     return { show: show };
  };
  
  var WorkflowDesignerVM = function ()
  {
     var clearInput = function ()
     {
        var name = $(this).attr("data-input");
        var stepId = $(this).attr("data-stepid");
  
        var dlg = new ClearInputDialog();
        dlg.show(name, function (result)
        {
           alert('clearing stepId: ' + stepId);
        });
     };
  
     var init = function ()
     {
        $(document).on("click", ".clear-input", clearInput);
     };
  
     init();
  };
  
  var vm = new WorkflowDesignerVM();
  </code></pre>
  
  <p>And the modal dialog looks like this:</p>
  
  <pre><code>&lt;div id="clearInputDialog" class="modal fade"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Clear Input for &lt;span id="clearInputTargetName"&gt;[clearInputTargetName]&lt;/span&gt;&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
              Are you sure you want to clear &lt;span id="clearInputName"&gt;[clearInputName]&lt;/span&gt;?
          &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default cancelButton" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" id="clearInputButton" class="btn btn-primary okButton" data-stepid="" data-input=""&gt;Clear&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>I have a feeling it has something to do with my jQuery event handler code. If I change the Dialog.init to the following code, then we always get one callback, but we always see the stepId from the first invocation.</p>
  
  <pre><code>var init = function ()
  {
     $(dlgId + " .okButton").on('click', function ()
     {
        onOK(true);
        hide();
  
        $(dlgId + " .okButton").off('click');
     });
  };
  </code></pre>