jQuery不在幻灯片容器div中加载项目

Question

单击图像时，似乎会出现项目文本，但是标题重复，并且“返回到Portofolio”按钮和标题按钮似乎不起作用。

如果返回到“投资组合”页面，项目文本仍会出现。

http://www.janinejauvel.com/test/

html

<li style="height:393px;" data-src="http://www.janinejauvel.com/wp-content/uploads/2012/09/editorial-1-rwd-magazine.png">
<span class="cover" style="width:308px;height:0px;background-image:url('http://www.janinejauvel.com/wp-content/uploads/2012/09/bg-white.png')"></span>
<hgroup style="width:308px;height:393px;background-image:url('http://www.janinejauvel.com/wp-content/uploads/2012/09/bg-white.png')" data-project="test/dirty-fashion">
                        <div>
                            <h3>Editorial I</h3>
                            <span class="dash">&mdash;</span>
                            <p>RWD Magazine</p>
                        </div>
                    </hgroup>
                </li>

script.js

// load the project into the slideshow container div
                $('#slideshow-container').load('' + $hgroup.attr('data-project'), function() {
                    // bind slideshow
                        slideshow.render();
                        $('section#work').css('margin-top', '0px');
                });

            });


$(document).ready(function() {

    hattie.init();
    hattie.clickEvents();
    hattie.loadImages();

});

$(window).resize(function() {

    // get the currently active project, if there is one

    if ($('#slideshow').length > 0) {


        var activeProject   = $('#slideshow').attr('class');

        // trigger click
        $('hgroup[data-project="'+ activeProject + '"]').trigger('click');

    }


});

Answer 1

因为在调用load时，是将整个HTML页面加载到包含该标头元素的div中。

查看正在加载的页面上的内容： http : //www.janinejauvel.com/test/dirty-fashion

您只需要内容。 查看加载页面片段 。

Answer 2

尝试更改：

$('#slideshow-container').load('' + $hgroup.attr('data-project'), function() {

至：

$('#slideshow-container').load('' + $hgroup.attr('data-project') + ' #content', function() {

这将在$ hgroup.attr（'data-project'）中加载URL的内容div。