title: adding dynamically created content to the DOM using Javascript
body: <p>I am working on a piece of code to load part of my content dynamically after user triggers the event by clicking. 
  the code works when i'm using static pages but loading dynamically generated page blank.</p>
  
  <p>Case Scenario is: when user clicks on the post, it will open a <code>modal</code> and display the detailed view which is the dynamic generated content using the <code>slug</code> in the link.</p>
  
  <p>here is my code.</p>
  
  <p><strong>PHP (Laravel) and HTML snippet ():</strong></p>
  
  <p><strong>updated</strong></p>
  
  <pre><code>&lt;div class="content-blocks blog hidex"&gt;
  
          &lt;section class="content"&gt;
              &lt;div class="block-content"&gt;
                  &lt;h3 class="block-title"&gt;My Blog&lt;/h3&gt;
                  &lt;div id="post-list" class="col-md-10 col-md-offset-1"&gt;
  
                      {% set posts = blogPosts.posts %}
  
                      {% for post in posts %}
                      &lt;div class="post"&gt;
  
                          &lt;div class="post-thumbnail"&gt;
                              {% if post.featured_images.count %}
                              {% set image = post.featured_images|first %}
                              &lt;a class="open-post" href="{{'blog-post'|page}}"&gt;
                                  &lt;img
                                          data-src="{{ image.filename }}"
                                          src="{{ image.path }}"
                                          alt="{{ image.description }}"
                                          style="max-width: 100%"/&gt;
  
                              &lt;/a&gt;
                              {% endif %}
                          &lt;/div&gt;
                          &lt;div class="post-title"&gt;
                              &lt;a class="open-post" href="{{ post.url }}"&gt;&lt;h2&gt;{{ post.title }}&lt;/h2&gt;&lt;/a&gt;
                              &lt;p class="post-info"&gt;
  
  
                                  &lt;span class="post-author"&gt;Posted by {{ post.user.first_name}} &lt;/span&gt;
                                  &lt;span class="slash"&gt;&lt;/span&gt;
                                  &lt;span class="post-date"&gt;on {{ post.published_at|date('M d, Y') }}&lt;/span&gt;
                                  &lt;span class="slash"&gt;&lt;/span&gt;
                                  {% if post.categories.count %} in {% endif %}
                                  {% for category in post.categories %}
                                  &lt;span class="post-category"&gt;{{ category.name }}&lt;/span&gt;
                                  {% if not loop.last %}, {% endif %}
                                  {% endfor %}
                              &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="post-body"&gt;
                              &lt;p&gt;{{ post.summary }}&lt;/p&gt;
                              &lt;a class="btn open-post" href="{{ post.url }}"&gt;Read More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      {% endfor %}
  
                      &lt;div class="text-center"&gt;
                          {% if posts.lastPage &gt; 1 %}
                          &lt;ul class="pagination"&gt;
                              {% if posts.currentPage &gt; 1 %}
                              &lt;li&gt;
                                  &lt;a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
                                     aria-label="Previous"&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
                                  &lt;/a&gt;&lt;/li&gt;
                              {% endif %}
  
                              {% for page in 1..posts.lastPage %}
                              &lt;li class="{{ posts.currentPage == page ? 'active' : null }}"&gt;
                                  &lt;a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}"&gt;{{ page }}&lt;/a&gt;
                              &lt;/li&gt;
                              {% endfor %}
  
                              {% if posts.lastPage &gt; posts.currentPage %}
                              &lt;li&gt;&lt;a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
                                     aria-label="Next"&gt;
                                  &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;/li&gt;
                              {% endif %}
                          &lt;/ul&gt;
                          {% endif %}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript updated:</strong> </p>
  
  <pre><code>$('#post-list').on('click','a', function(){
      var postUrl = $(this).attr("href");
  
      var post = '&lt;div class="modal" id="post-modal"&gt;&lt;div class="inline-menu-container"&gt;&lt;a id="modal-close" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
      $(post).modal({
        remote: postUrl + ' #post'
      })
  
      return false;
  
  });
  </code></pre>
  
  <p>result adds only this code to the DOM without the dynamic content from the post link:</p>
  
  <pre><code>&lt;div class="stripe-loading-indicator loaded"&gt;&lt;div class="stripe"&gt;&lt;/div&gt;&lt;div class="stripe-loaded"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="modal-backdrop in"&gt;&lt;/div&gt;
  &lt;div class="modal in" id="post-modal" style="display: block;"&gt;&lt;div class="inline-menu-container"&gt;&lt;a id="modal-close" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Expected result is to add the following code to the DOM:</p>
  
  <pre><code>&lt;div class="stripe-loading-indicator loaded"&gt;&lt;div class="stripe"&gt;&lt;/div&gt;&lt;div class="stripe-loaded"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="modal-backdrop in"&gt;&lt;/div&gt;
  &lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;div id="post" class="blog"&gt;
  
      &lt;section id="layout-content"&gt;
  
          &lt;div class="content"&gt;&lt;p&gt;This is your first ever &lt;strong&gt;blog post&lt;/strong&gt;! It might be a good idea to update this post with some more relevant content.&lt;/p&gt;
              &lt;p&gt;You can edit this content by selecting &lt;strong&gt;Blog&lt;/strong&gt; from the administration back-end menu.&lt;/p&gt;
              &lt;p&gt;&lt;em&gt;Enjoy the good times!&lt;/em&gt;&lt;/p&gt;&lt;/div&gt;
  
              &lt;div class="featured-images text-center"&gt;
                  &lt;p&gt;
                      &lt;img
                      data-src="PhenometechBusiness-Card-Back.jpg"
                      src="/storage/app/uploads/public/587/d0a/0e0/587d0a0e0608e385456109.jpg"
                      alt=""
                      style="max-width: 100%" /&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;p class="info"&gt;
                  Posted
                  in
                  &lt;a href="http://localhost:8000/blog"&gt;generic&lt;/a&gt;                on Jan 16, 2017
              &lt;/p&gt;        
  
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>*note: I have read similar questions posted, but none of the solutions worked for me so far. </p>