JQuery 动态 .load - 适用于 1 而不适用于另一个？答案

【问题标题】：JQuery dynamic .load - works for 1 and not for the other?JQuery 动态 .load - 适用于 1 而不适用于另一个？
【发布时间】：2009-08-21 21:33:13
【问题描述】：

更新：网站在线

http://qwickqual.com/memorial/create/

在“Memoria Media”下 -> 点击“我们的视频”，它会加载类别列表点击任何子类别，它会经历下面的过程

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

错误的更新描述：

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

也许有人以前遇到过类似的问题？？

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

我还在代码中添加了 cmets

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

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

其中 1 个有效，其中 1 个无效，并且两者都加载到同一页面加载 HTML

任何想法我在这里缺少什么？或者我需要添加以帮助调试的信息？目前将此发布到实时服务器以与之交互，直到现在才在本地...

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

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

示例：从下面的 HTML：单击脚本将正确查询服务器：GET http://localhost:8000/memorial/media_type/our_videos/4/

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

范围链： [Call, Call multi=false uri=/memorial/media_type/our_videos/, Window # 0=Call 1=Call 2=window]

相对变量：标签 = “我们的视频” 包装器=“媒体” uri = "/memorial/media_type/our_videos/" 多=假

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>

【问题讨论】：

标签： jquery django

【解决方案1】：

在您的load_media_type 函数中，您确定这段代码返回了正确的html（您最后一个sn-p 的html）？

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

【讨论】：

是的，sn-p 正确加载，例如：我点击“our_videos”它会加载上面的 sn-p - 我点击
并进行查询，返回上面的第 3 个 sn-p （在您的评论之后添加）， - 它不会加载到包装器 div 中 - 当我单步执行它时，它也会跳过后续函数第 3 个 sn -p 是从与第 1 和第 2 相同的模板生成的，第 1 将正确加载子类别...

抱歉弄了这么久，尝试添加格式，cmets 似乎对这个想法不友好