Read-more链接不适用于动态加载的内容

时间:2016-10-04 19:00:21

标签: jquery css xml

我有一个使用xml文件中的内容动态加载的div。我想在其中添加一个read-more链接,这样如果用户点击了read-more,我就可以显示整个内容。这在内容硬编码到页面中时有效,但在动态加载内容时则无效。

我已经尝试将xml内容中的read-more链接部分编写,我已经尝试将其编码到div中。无论哪种方式,当我点击read-more链接时,没有任何反应。我在代码中放了一条alert()行,它没有触发。因此,由于某种原因,该页面无法访问更多的读取代码。

有人可以告诉我如何使用动态加载的内容吗?

HTML:

<div class="col span_3_of_6 slide_story_text story_container" id="slide_story_text">
</div>

的CSS:

.slide_story_text {
    font-family: 'proxima-nova', sans-serif;
    font-size: 130%;
    color: #999;
    line-height: 170%;
    position: relative;
    padding-left: 20px;
    max-height: 290px;
    overflow: hidden;
  }
  .slide_story_text .read-more{ 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; 
  padding: 50px 0 0 0; 
  cursor: pointer;
  font-size: 90%;
  font-family: 'proxima-nova', sans-serif;
  font-weight: bold;
  letter-spacing: .05em;
  margin-bottom: 0 !important;
  z-index: 999;
  background-image: linear-gradient(to bottom, transparent, white);
    color: #000;
}

jquery的:

$.ajax({
              type: "GET",
              url: "churchdata.xml",
              dataType: "xml",
              success: function(xml) {
                   $('.slide_story_text').html( $(item).parent().find("story").text() );

                        //begin read-more
                        $(".story_text .read-more").on('click', function() {
                          totalHeight = 0;
                          $el = $(this);
                          $p  = $el.parent();
                          //$up = $p.parent();
                          $up = $('#slide_story_text');
                          $ps = $up.find("p:not('.read-more')");

                          // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
                          $ps.each(function() {
                            totalHeight += $(this).outerHeight() + 15;

                          });

                          $up
                            .css({
                              // Set height to prevent instant jumpdown when max height is removed
                              "height": $up.height()
                              //"max-height": 'none'
                            })
                            .animate({
                              "height": totalHeight

                            });
                          $('.story_text').css({'max-height':'none'});
                          // fade out read-more
                          $('.read-more').fadeOut();

                          // prevent jump-down
                          return false;

                        });
                        //end read-more

}

});

的xml:

<churches>
    <church>
<story><![CDATA[<p>Fusce placerat neque id arcu rhoncus, non aliquet elit sollicitudin. Duis interdum, enim vel laoreet interdum, leo dolor euismod justo, non ultrices ex ipsum elementum massa. Maecenas dictum sapien eu lectus malesuada, in dictum ipsum varius. Vivamus eleifend lacus risus, ut finibus ligula tempus ac. Etiam a quam sed est cursus luctus. Praesent cursus purus quis mollis tincidunt. Vivamus placerat at ex nec volutpat. Vestibulum erat tortor, tristique non ultricies ut, accumsan id lacus. Mauris tincidunt viverra sagittis. Donec finibus, sapien vitae dictum mattis, elit lectus ultrices risus, vitae porta magna ipsum quis orci. Nunc nec pharetra nunc. Ut eu magna sed urna viverra vulputate.</p>

<p>Aliquam a viverra arcu, eget sollicitudin nibh. Integer vitae libero vel diam fringilla bibendum sed in sem. Sed lobortis commodo ipsum, quis fringilla dui viverra ac. Vivamus at diam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus euismod vel nunc a pellentesque. Phasellus quis imperdiet leo. Ut porta ultricies justo, eget ultrices tortor sodales a. Mauris mattis blandit rhoncus. Morbi nec laoreet eros. Aliquam erat volutpat. Ut sed risus dignissim, vestibulum ex quis, euismod tortor. Curabitur mattis consequat sapien, vulputate pellentesque lectus. Donec efficitur sapien vel justo interdum accumsan. Praesent facilisis fermentum dolor.</p>

<p>Curabitur laoreet, nisl pellentesque molestie dictum, metus est tempus ante, congue tincidunt libero lectus vitae diam. Nulla tempus neque urna, vel pharetra lacus convallis eu. Donec at aliquam orci. Ut euismod tellus nec lacus accumsan semper. Nulla ut ex vitae ex congue maximus. Morbi eu diam et mauris efficitur eleifend quis ac dolor. Sed dapibus porttitor porta. Pellentesque sollicitudin tempor odio, vel condimentum augue feugiat eget. Mauris nec vestibulum massa. Curabitur sed turpis id ipsum blandit efficitur. Cras at viverra tellus, ut condimentum libero.</p>

<p class="read-more">READ MORE</p>

<p>Nunc augue odio, molestie at turpis nec, blandit placerat lorem. Donec nec arcu quis dui tristique sodales ac ut quam. Pellentesque neque purus, volutpat sed arcu vitae, mollis sollicitudin dolor. Aenean dapibus laoreet tellus eu dignissim. Nam interdum ultricies mi. Sed vitae risus urna. Duis iaculis, dolor eget ultricies rhoncus, velit risus finibus purus, nec maximus metus mi ut tellus. Duis suscipit sapien quis lacus elementum efficitur. Aenean elementum auctor ante, eget vestibulum lacus. Mauris mauris turpis, tempor vel odio vitae, iaculis volutpat mi. Quisque sit amet tempor libero, sit amet varius augue.</p>

<p>Vestibulum feugiat eros massa, pretium porta mauris bibendum in. Praesent suscipit felis vel erat convallis posuere. Morbi tempor tristique auctor. Nam vestibulum velit vitae magna semper aliquet. Aenean aliquam magna erat, vel lacinia mauris pretium in. Maecenas aliquam tortor tortor, non mollis enim lacinia et. Aenean hendrerit nisi eros, sed tempus felis consectetur quis. Cras aliquet dignissim eros sed ornare. Etiam cursus pellentesque lorem ac ultrices. Morbi feugiat at diam id pellentesque. Pellentesque at vehicula eros, a fermentum ex.</p>

<p>Nullam interdum libero risus, eget ultricies velit dapibus at. Sed lorem arcu, bibendum finibus dui tristique, mattis porttitor dui. Vivamus malesuada tellus magna, a mollis velit mollis eu. Curabitur commodo vehicula lectus id dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In interdum nec lorem nec imperdiet. Curabitur sit amet semper ipsum. Proin sagittis vitae augue sodales egestas. Etiam auctor quam diam, quis viverra tortor varius id. Nunc dapibus pharetra mauris. Phasellus et tortor sapien. Quisque placerat aliquet tellus, nec congue risus commodo vitae.</p>

<p>Vestibulum vulputate, ipsum non lacinia laoreet, urna magna volutpat lectus, non aliquet nunc mauris at purus. Vestibulum at tempor quam. Sed suscipit porttitor auctor. Nullam in elit euismod, euismod lectus ut, varius magna. Aenean vel justo elit. Pellentesque id gravida nisi. Cras accumsan interdum felis sit amet facilisis.</p>]]></story>
    </church>
</churches>

0 个答案:

没有答案
相关问题