使用 Javascript 将动态创建的内容添加到 DOM

Question

我正在编写一段代码，以便在用户通过单击触发事件后动态加载我的部分内容。 当我使用静态页面但加载动态生成的页面空白时，该代码有效。

案例场景是：当用户点击帖子时，会打开一个modal并显示详细视图，这是使用链接中的slug动态生成的内容。

这是我的代码。

PHP (Laravel) 和 HTML sn-p ():

更新

<div class="content-blocks blog hidex">

        <section class="content">
            <div class="block-content">
                <h3 class="block-title">My Blog</h3>
                <div id="post-list" class="col-md-10 col-md-offset-1">

                    {% set posts = blogPosts.posts %}

                    {% for post in posts %}
                    <div class="post">

                        <div class="post-thumbnail">
                            {% if post.featured_images.count %}
                            {% set image = post.featured_images|first %}
                            <a class="open-post" href="{{'blog-post'|page}}">
                                <img
                                        data-src="{{ image.filename }}"
                                        src="{{ image.path }}"
                                        alt="{{ image.description }}"
                                        style="max-width: 100%"/>

                            </a>
                            {% endif %}
                        </div>
                        <div class="post-title">
                            <a class="open-post" href="{{ post.url }}"><h2>{{ post.title }}</h2></a>
                            <p class="post-info">


                                <span class="post-author">Posted by {{ post.user.first_name}} </span>
                                <span class="slash"></span>
                                <span class="post-date">on {{ post.published_at|date('M d, Y') }}</span>
                                <span class="slash"></span>
                                {% if post.categories.count %} in {% endif %}
                                {% for category in post.categories %}
                                <span class="post-category">{{ category.name }}</span>
                                {% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </p>
                        </div>
                        <div class="post-body">
                            <p>{{ post.summary }}</p>
                            <a class="btn open-post" href="{{ post.url }}">Read More</a>
                        </div>
                    </div>
                    {% endfor %}

                    <div class="text-center">
                        {% if posts.lastPage > 1 %}
                        <ul class="pagination">
                            {% if posts.currentPage > 1 %}
                            <li>
                                <a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a></li>
                            {% endif %}

                            {% for page in 1..posts.lastPage %}
                            <li class="{{ posts.currentPage == page ? 'active' : null }}">
                                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                            </li>
                            {% endfor %}

                            {% if posts.lastPage > posts.currentPage %}
                            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
                                   aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                            </li>
                            {% endif %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>
    </div>

JavaScript 更新：

$('#post-list').on('click','a', function(){
    var postUrl = $(this).attr("href");

    var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';

    $(post).modal({
      remote: postUrl + ' #post'
    })

    return false;

});

result 仅将此代码添加到 DOM，而没有来自帖子链接的动态内容：

<div class="stripe-loading-indicator loaded"><div class="stripe"></div><div class="stripe-loaded"></div></div>
<div class="modal-backdrop in"></div>
<div class="modal in" id="post-modal" style="display: block;"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>

预期的结果是将以下代码添加到 DOM：

<div class="stripe-loading-indicator loaded"><div class="stripe"></div><div class="stripe-loaded"></div></div>
<div class="modal-backdrop in"></div>
<div class="modal-dialog"><div class="modal-content"><div id="post" class="blog">

    <section id="layout-content">

        <div class="content"><p>This is your first ever <strong>blog post</strong>! It might be a good idea to update this post with some more relevant content.</p>
            <p>You can edit this content by selecting <strong>Blog</strong> from the administration back-end menu.</p>
            <p><em>Enjoy the good times!</em></p></div>

            <div class="featured-images text-center">
                <p>
                    <img
                    data-src="PhenometechBusiness-Card-Back.jpg"
                    src="/storage/app/uploads/public/587/d0a/0e0/587d0a0e0608e385456109.jpg"
                    alt=""
                    style="max-width: 100%" />
                </p>
            </div>

            <p class="info">
                Posted
                in
                <a href="http://localhost:8000/blog">generic</a>                on Jan 16, 2017
            </p>        

        </div>
    </section>
</div>
</div>
</div>

*注意：我已经阅读过发布的类似问题，但到目前为止，没有一个解决方案对我有用。

Answer 1

终于找到问题所在了。怀疑这不是代表问题。这是 javascript 代码中引导模式中使用的远程 URL 的问题：

$('.open-post').on('click', function(){
    var postUrl = $(this).attr("href");

    var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';

    $(post).modal({
      remote: postUrl
    })
    return false;
});