title: Bootstrap / jQuery binding click() event triggering in the same function it is added
body: <p>I have a Bootstrap card which, when clicked on, presents the user with a series of choices, then should return to it's original state.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/wgksny22/6/" rel="nofollow noreferrer">https://jsfiddle.net/wgksny22/6/</a></p>
  
  <p>The card is a basic one:</p>
  
  <pre><code>&lt;div class="card border-secondary my-cell"&gt;
    &lt;div class="card-header"&gt;
      &lt;h6&gt;Card Header&lt;/h6&gt;
    &lt;/div&gt;
    &lt;div class="card-body my-cell-inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The following is loaded as a cloneable template <code>optionsTemplate</code>:</p>
  
  <pre><code>&lt;div id="options-template"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col btn-group-vertical btn-group btn-group-toggle options1" data-toggle="buttons"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;A&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;B&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col btn-group-vertical btn-group btn-group-toggle options2" data-toggle="buttons"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;C&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;D&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS that runs the process:</p>
  
  <pre><code>        var cell = $('.my-cell');
          var innerCell = $('.my-cell-inner', cell);
          var onClick = function() {
              // the buttons templates
              var edit = optionsTemplate.clone();
              $(".options1 .btn", edit).click(function() {
                  $(".options1", edit).hide();
                  $(".options2", edit).show();
              });
              $(".options2 .btn", edit).click(function() {
                  $(".options2", edit).hide();
                  $(innerCell).empty();
                  // the problem is here; this is fired as part
                  // of the click applying to this function
                  $(cell).click(onClick);
              });
  
              $(".options1", edit).show();
              $(".options2", edit).hide();
  
              $(cell).off('click');
              $(innerCell).append(edit);
          };
          $(cell).click(onClick);
  </code></pre>
  
  <p>It works until the end of the 2nd selection; as part of the click on the buttons the re-added click binding is processed and it reshows the 1st selection:</p>
  
  <ul>
  <li>click -> shows A/B -> shows C/D -> shows A/B etc.</li>
  </ul>
  
  <p>Whereas it should be:</p>
  
  <ul>
  <li>click -> shows A/B -> shows C/D -> finish (ready for another click).</li>
  </ul>
  
  <p>How do I rebind the click in a way that doesn't cause it to be triggered as part of the ongoing click?</p>
  
  <p>I have tried using a jQuery promise but it doesn't seem to be working:</p>
  
  <pre><code>jQuery.Deferred().promise().done(function() {
      // this is never reached
      $(cell).click(onClick);
  });
  </code></pre>