Question

更新：网站在线

“Memoria Media”下的

- ＆gt;点击“我们的视频”，它会加载类别列表点击任何子类别，它将完成以下过程

----------------结束编辑----------------------------- -----

更新的错误描述：

All code is based on <li> objects being linked
If I click on an <li> from the Initial page load to load:
  section 1: I can click on an <li> to load sub-categories

  section 2: I then click on an <li>, the query is made server returns section 3,
      section is not loaded to screen / and callback function is skipped over

或许有人在遇到类似的问题之前？

----------------结束编辑----------------------------- -----

我还在代码中添加了评论

我有一个jquery函数，可以设置加载分类缩略图列表。到目前为止，该功能正在3个位置使用。他们每个人都使用django下的相同模板生成HTML。该功能在3个位置中的2个位置完美运行，我很清楚为什么第3个不起作用。

以下是完整的相关javascript集，相关部分的页面加载HTML。以及通过脚本加载的2个HTML示例

其中1个有效，其中1个没有，两个都加载到同一页面加载HTML

我在这里缺少什么想法？或者我需要添加哪些信息来帮助调试？目前将其发布到实时服务器进行交互，直到现在才在本地...

错误：脚本在title =“our_photos”的所有级别都能正常工作脚本加载第一级title =“our_videos”

脚本不会加载title =“our_videos”的子类别

实施例：从下面的HTML：点击脚本将正确查询服务器：获取http://localhost:8000/memorial/media_type/our_videos/4/

脚本不会将返回的HTML加载到#select_media div

中

scopeChain： [Call，Call multi = false uri = / memorial / media_type / our_videos /，Window＃0 = Call 1 = Call 2 = window]

相对vars： label =“our_videos” wrapper =“media” uri =“/ memorial / media_type / our_videos /” multi = false

的Javascript

<script type="text/javascript">
// this piece is where I'm having trouble in the grand scheme of things
// label = piece of class tag
// wrapper = tag to load everything inside of
// uri = base of the page to load
// multi = not relevant for this piece but needed to pass on to next function
function img_thumb_loader(label, wrapper, uri, multi) {
    if(!(wrapper)) { wrapper = label }
    $('.'+label+'_category').click(function () {
// show the loading animation
        $('div#'+wrapper+'_load').show();
// get var of current object
        type = $(this).attr('title') || '';
// load it into the screen - this is the error
// when I click on an <li> from section 2 below it will query server
// (Tamper data & server see it - & return section 3 below
// But will not load into the screen on return
// also skips over the callback function
        $('#select_'+label).load(uri+type+'/', '', function() {
            $('div#'+wrapper+'_load').hide();
            $('input.img_'+label+'_field').each(function() {
                img = $(this).attr('value');
                $('li#img_'+label+'-'+img).css('selected_thumb');
            });
            img_thumb_selected(label);
            window[label+'_loader']();
        });
    });

    $('.img_'+label).click(function () {
        if($(this).hasClass('selected_thumb')) {
            $(this).removeClass('selected_thumb');
            id = $(this).attr('title');
            $('.img_'+label+'_selected[value="'+id+'"]').remove();
        } else {
            if(!(multi)) {
                previous = $('.img_'+label+'_selected').val();
                $('#img_'+label+'-'+previous).removeClass('selected_thumb');
                $('.img_'+label+'_selected').remove();
            }
            $(this).addClass('selected_thumb');
            id = $(this).attr('title');
            $('#select_'+wrapper).after('<input class="img_'+label+'_selected" id="img_'+label+'_field-'+id+'" type="hidden" name="imgs[]" value="'+id+'" />');
        }
    });

    img_thumb_selected(label);
}

function img_thumb_selected(label) {
    $('.img_'+label+'_selected').each(function() {
        current = $(this).val();
        if(current) {
            $('#img_'+label+'-'+current).addClass('selected_thumb');
        }
    });
}

function media_type() {
    $('.media_type').click(function () {
        $('#media_load').show();
        type = $(this).attr('title') || '';
        $('#select_media').load('/memorial/media_type/'+type+'/', '', function() {
            $('#select_media').wrapInner('<div id="select_'+type+'"></div>');
            $('#select_media').append('<ul class="root_link"><h3><a class="load_media" onclick="return false;" href="#">Return to Select Media Type</a></h3></ul>');
            load_media_type();
            $('#media_load').hide();
            window[type+'_loader']();
        });

    });
}
media_type();

function load_media_type() {
    $('.load_media').click(function () {
        $('#media_load').show();
        $('#select_media').load('{% url mem_media_type %}', '', function() {
            $('#media_load').hide();
            media_type();
        });
    });
}

function our_photos_loader() {
    img_thumb_loader('our_photos', 'media', '{% url mem_our_photos %}', true);
}

function our_videos_loader() {
    img_thumb_loader('our_videos', 'media', '{% url mem_our_videos %}', false);
}

</script>

HTML - 初始页面加载

<fieldset>
        <legend>Memorial Media</legend>
        <div style="display: none;" id="media_load" class="loading"/>
        <div id="select_media">
            <ul style="width: 528px;" class="initial">
                <li title="your_photos" class="media_type"><div class="photo_select_upload"><h3>Your Photos</h3></div></li>
                <li title="our_photos" class="media_type"><div class="photo_select"><h3>Our Photos</h3></div></li>
                <li title="our_videos" class="media_type"><div class="video_select"><h3>Our Videos</h3></div></li>
            </ul>
</div>
    </fieldset>

HTML - 点击第1部分

返回

此部分可以调用子类别，它将起作用

<br class="clear" />
<ul class="thumb_sub_category" style="width: 352px;">


    <li id="our_photos_category-29" class="our_photos_category" title="29">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/stuff_004_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Birds 1</p>

        </div>


    </li>

    <li id="our_photos_category-25" class="our_photos_category" title="25">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/dsc_0035_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Dogs 1</p>

        </div>

    </li>


</ul>

HTML - 点击第2部分

返回

此区域的子类别出现问题

<br class="clear" />
<ul class="thumb_sub_category" style="width: 528px;">


    <li id="our_videos_category-1" class="our_videos_category" title="1">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 1</p>

        </div>


    </li>

    <li id="our_videos_category-3" class="our_videos_category" title="3">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 3</p>

        </div>

    </li>

    <li id="our_videos_category-4" class="our_videos_category" title="4">


        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 4</p>

        </div>

    </li>

</ul>

无法加载的HTML - 第3节

<br class="clear" />
<ul class="thumb_sub_category" style="width: 528px;">


    <li id="our_videos_category-1" class="our_videos_category" title="1">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 1</p>
        </div>

    </li>


    <li id="our_videos_category-3" class="our_videos_category" title="3">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 3</p>
        </div>

    </li>

    <li id="our_videos_category-4" class="our_videos_category" title="4">

        <div>


            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 4</p>
        </div>

    </li>

</ul>

Answer 1

在load_media_type函数中，您确定此代码返回正确的html（您的最后一段html）？

$('#select_media').load('{% url mem_media_type %}', '', function() {
  $('#media_load').hide();
  media_type();
});

Answer 2

在那里阅读的代码太多了。但是略过描述和后续评论，听起来好像是在动态加载一些HTML，并期望预先存在的click事件能够处理新加载的HTML。

这不起作用。您需要在加载HTML后专门分配click函数，或使用jQuery的live方法确保所有添加的HTML都继承该函数。

JQuery dynamic .load - 适用于1而不适用于其他？

的Javascript

HTML - 初始页面加载

此部分可以调用子类别，它将起作用

此区域的子类别出现问题

无法加载的HTML - 第3节

2 个答案: