title: Why I'm not able to show second modal dialog after closing the first modal dialog?
body: <p>I'm using <strong>Bootstrap v3.3.5</strong> for my website.</p>
  
  <p>I've a following HTML code of first bootstrap modal dialog :</p>
  
  <pre><code>&lt;div style="display: block;" id="myModal-event" class="modal fade in" role="dialog"&gt;
    &lt;div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;"&gt;
      &lt;div class="modal-content" style="border:0;"&gt; 
        &lt;div style="margin-top: 10px;" role="document" class="modal-dialog event-planner"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 id="myModalLabel" class="modal-title"&gt;Event Details&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-6 col-md-6 col-sm-12"&gt;
                  &lt;div class="event-title"&gt;
                  NewDemoEvent5
                  &lt;input name="hid_event_id" id="hid_event_id" value="501" type="hidden"&gt;
                  &lt;/div&gt;
                  &lt;ul id="popover-content" class="list-group" style="display: none"&gt;
                    &lt;a href="#" data-target="#myModal-edit-event" class="list-group-item" id="edit-event"&gt;Edit Event&lt;/a&gt;
                    &lt;a href="#" class="list-group-item"&gt;Invite Members&lt;/a&gt;
                    &lt;a href="#" class="list-group-item"&gt;Delete Event&lt;/a&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;hr&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When user clicks on menu hyperlink <strong>"Edit Event"</strong> the above modal dialog should get close and a new modal dialog should get open.</p>
  
  <p>Following is the HTML of  new modal dialog :</p>
  
  <pre><code>&lt;div id="myModal-edit-event" class="modal fade" role="dialog"&gt;
    &lt;div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;"&gt;
      &lt;div class="modal-content" style="border:0;"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 id="myModalLabel" class="modal-title"&gt;Event Details&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt; Loading Mannu... &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm able to close the first modal dialog upon clicking on "Edit Event" hyperlink but I'm not able to open up a new second modal dialog.</p>
  
  <p>I tried below code :</p>
  
  <pre><code>$('#myModal-event').on('click', '#edit-event', function (event) {
    event.preventDefault();
    $(this).closest('.modal').modal('hide');
    $('#myModal-edit-event').modal('show');
  });
  </code></pre>
  
  <p>Also, some other script used for some other functionality gets executed. I strongly think that it is affecting my code as well. That script is as below.</p>
  
  <pre><code>$(document).ready(function() {
    $('body').on('hidden.bs.modal', '#myModal-event', function () {
      console.log('Hi *');
      $("#myModal-event .modal-body").html(' Loading... ');
      $(this).removeData('bs.modal');    
      });
  });
  </code></pre>
  
  <p>In above script I want to know whether the execution stops after the statement <code>console.log('Hi *');</code> and the last two statements doesn't get execute.</p>
  
  <p>Some one please help me in my issue.</p>
  
  <p>Thanks.</p>