title: How to change content of a modal at each opening
body: <p>I have'a modal ( <strong>I use twitter bootstrap 2.3.2</strong> and I need to use it please dont say to use bootstrap3), and I want to show different content based on the clicked button. In other words, there are multiple buttons that are added dynamically into dom, and based on the clicked button, I need to show different content. Currently, it always shows the content of the first clicked button no matter where I'am pushing. Here is my code:</p>
  
  <pre><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt; × &lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;Query Name&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
  
         &lt;div id="graph" style="position:relative;overflow:hidden;cursor:default;" class="{{getViewType}}"&gt;
             &lt;center id="splash" style="padding-top:230px;"&gt;
                 &lt;img src="../images/loading.gif"&gt;
             &lt;/center&gt;
         &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my handler: </p>
  
  <pre><code>$(document).on('hidden','#myModal',function(){
      console.log('it comes here');  // this is printed every time I close modal
       $(this).removeData('modal');
  });
  </code></pre>