Question

我有以下div：

<div id="flip" class="container">
    <div class="f-page f-cover">
        <div class="cover-elements">
            <div class="f-cover-story">
                <span>Life Events</span>
                Photo Album
            </div>
        </div>
        <div class="f-cover-flip">
            &lt; swipe
        </div>
    </div>
</div>

我试图像这样添加到这个div：

for(var i = events.length; i > 0 ; i -= 5 ){
                    result_html += "<div class='f-page'>";
                        result_html += "<div class='f-title'>";
                            result_html += "<a href='index.jsp'>Back to bookshelf</a>";
                            result_html += "<h2 id='event_name'>Your Life Events</h2>";
                            result_html += "<a href='#'></a>";
                        result_html += "</div>";

                        if(index < events.length){
                            result_html += "<div class='box w-25 h-70' id='top_left_box'><div class='img-cont img-1'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";

                            index++;
                        }
                        if(index < events.length){

                            result_html += "<div class='box w-50 h-70 box-b-l box-b-r' id='top_center_box'><div class='img-cont img-2'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /> </p></div>";
                            index++;
                        }   
                        if(index < events.length){

                            result_html += "<div class='box w-25 h-70' id='top_right_box'><div class='img-cont img-3'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";

                            index++;
                        }
                        if(index < events.length){
                            result_html += "<div class='box w-50 h-30 box-b-r title-top' id='bottom_left_box'><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";
                            index++;
                        }
                        if(index < events.length){
                            result_html += "<div class='box w-50 h-30 title-top' id='bottom_right_box'><h3>" 
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";
                            alert("<img src="+events[index].participants[0].pictureUrl + " />");
                            index++;
                        }
                    result_html += '</div>';

                }

                result_html += "<div class='f-page f-cover-back'><div id='codrops-ad-wrapper'><a href='index.jsp' >Back to bookshelf</a></div></div>";

                $(".container").append(result_html);

                alert($(".container").html());

            });

发生的事情是它附加但是那里的div

<div class="f-page f-cover">
            <div class="cover-elements">
                <div class="f-cover-story">
                    <span>Life Events</span>
                    Photo Album
                </div>
            </div>
            <div class="f-cover-flip">
                &lt; swipe
            </div>
        </div>

当我alert($(".container").html());

时，

显示为空白

从我在jquery追加函数中看到的这应该可以工作但似乎它正在重放或删除flip div的内容。为什么呢？

修改

这种情况正在发生，因为我在ajaxStop jquery中进行警报。

如果我在document.ready中执行此操作，则返回内容。为什么会这样？

Answer 1

你可以试试

$(result_html).appendTo($('.container'));

而不是

 $(".container").append(result_html);

对我而言，它有效。

附加到div而不替换内容，只是添加到最后

1 个答案: