堆栈内存溢出
  简体   繁体   English

colorbox发送到错误的网址？

[英]colorbox sending to the wrong url?

 原文  2012-12-13 16:41:01  5   1    javascript/ jquery/ ajax/ colorbox

问题描述

I have multiple colorbox in one page. 一页中有多个颜色框。

those colorbox's links are generated with javascript. 这些颜色框的链接是使用javascript生成的。

Now every time a new link that opens a colorbox get generated any clicked link associated with colorbox will go to that new link's url. 现在，每次生成用于打开颜色框的新链接时，与该颜色框关联的所有单击的链接都将转到该新链接的URL。

this is how i declared the colorbox: 这就是我声明颜色框的方式： 

$('.ajax').colorbox();

the href in the link are correct but still send to the last generated link's href. 链接中的href正确，但仍发送到最后生成的链接的href。

Thanks in advance. 提前致谢。

Edit : this is the code how i add some links: 编辑：这是代码我如何添加一些链接： 

$('.albums').live('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    parent_id           = $(this).parents().eq(2)[0].id;
    parent_header       = $('#' + parent_id + ' header')[0].innerHTML;
    parent_section      = $('#' + parent_id + ' section')[0].innerHTML;
    parent_footer       = $('#' + parent_id + ' footer')[0].innerHTML;
    fragment            = $(this).attr('href').split('/')[$(this).attr('href').split('/').length - 1];
    parent              = $(this).parents().eq(2)[0].id;
    if(fragment.indexOf('_-_') !== -1)
        page = fragment.replace('_-_', '/');
    else
        page = fragment;
    old_data[parent_id] = {'header': parent_header, 'footer': parent_footer, 'section': parent_section, 'link': parent + '/' + page};
    $.post('files/get_page', { page: old_data[parent_id]['link'] }, function(data){
        ret     = JSON.parse(data);
        a       = $('<a>').addClass('reset_link').attr('href', '#').append('Back To Albums');
        a.click(function(e){
            e.preventDefault();
            e.stopPropagation();
            this_parent_id      = $(this).parents().eq(1)[0].id;
            $('#' + this_parent_id + ' header').html(old_data[this_parent_id]['header']);
            $('#' + this_parent_id + ' section').html(old_data[this_parent_id]['section']);
            $('#' + this_parent_id + ' footer').html(old_data[this_parent_id]['footer']);
        })
        $('#' + parent).children().eq(0).html(a);
        $('#' + parent).children().eq(0).append(ret.header);
        $('#' + parent).children().eq(1).html('');
        for(i in ret.body.images){
            href            = ret.body.href + ret.body.images[i].image_name;
            image_id        = ret.body.images[i].image_id;
            delete_div_id   = 'delete_image_' + image_id;
            body            = $('<div>').addClass('albums_div');
            delete_div      = $('<div>').addClass('delete').append('&#10006; Supprimer').attr('id', image_id);
            a               = $('<a>').addClass('lightbox').attr('href', href);
            a.attr('onclick', 'return false;');
            a.append('&#9673; ' + ret.body.images[i].image_name);
            delete_div.click(function(){
                id          = delete_div_id;
                id_array    = id.split('_');
                $.post('files/delete', { id: image_id, del: id_array[1] }, function(data){
                    $(body).remove();
                });
            });
            body.append(a);
            body.append(delete_div);
            $('#' + parent).children().eq(1).append(body);
            $('.lightbox').colorbox({rel: 'group1'});
        }

        footer  = $('<a>').addClass(ret.footer['attr'].class).attr('id', ret.footer['attr'].id).attr('href', ret.footer['href']);
        footer.append(ret.footer['text']);
        footer.click(function(e){
            e.preventDefault();
            $.colorbox({href: ret.footer['href']});
        });
        $('#' + parent).children().eq(2).html(footer);
    });
});

NOTE: the code generates the right links with the correct href but the problem in the colorbox it self. 注意：代码会使用正确的href生成正确的链接，但颜色框本身会出现问题。 and I knew this because i did this: 我知道这一点，因为我这样做是：

i assigned a live click event to the links with the colorbox like this: 我将实时点击事件分配给带有颜色框的链接，如下所示： 

$(".upload_file").live('click', function(){
    console.log($(this)[0].href);
});

and the href printed to the console's the right one but the page that was displayed in the colorbox is wrong. 并且href打印到控制台的右侧，但是在颜色框中显示的页面错误。

Edit 2 adding the HTML: 编辑2添加HTML：

the page before the javascript changing the code: javascript更改代码之前的页面： 

<section id="reference">
    <header class="inner_header"><h3>R&#201;F&#201;RENCE PAGE SECTION</h3></header>
    <section>
        <h4>Choose an album :</h4>
        <div class="albums_div">
            <a href="res_yass" onClick="return false;" class="albums">&#9733; R&#233;sidence YASSINE</a>
            <div class="delete" id="delete_album_1">&#10006; Supprimer</div>
        </div>
        <div class="albums_div">
            <a href="res_nesr" onClick="return false;" class="albums">&#9733; R&#233;sidence NESRINE</a>
            <div class="delete" id="delete_album_2">&#10006; Supprimer</div>
        </div>
        <div class="albums_div">
            <a href="azerty" onClick="return false;" class="albums">&#9733; Azerty</a>
            <div class="delete" id="delete_album_8">&#10006; Supprimer</div>
        </div>
    </section>
    <footer class="inner_footer"><a href="files/add/reference" class="add_album ajax" id="reference">Add an album</a></footer>
</section>

the page after javascript change the code: javascript之后的页面更改代码： 

<section id="reference">
    <header class="inner_header"><a class="reset_link" href="#">Back To Albums</a><h4>Azerty</h4></header>
    <section>
        <div class="albums_div">
            <a class="lightbox cboxElement" href="f352702127.jpg" onclick="return false;">◉ f352702127.jpg</a>
            <div class="delete" id="128">✖ Supprimer</div>
        </div>
        <div class="albums_div">
            <a class="lightbox cboxElement" href="f65564287.jpg" onclick="return false;">◉ f65564287.jpg</a>
            <div class="delete" id="129">✖ Supprimer</div>
        </div>
        <div class="albums_div">
            <a class="lightbox cboxElement" href="f184021055.jpg" onclick="return false;">◉ f184021055.jpg</a>
            <div class="delete" id="130">✖ Supprimer</div>
        </div>
    </section>
    <footer class="inner_footer"><a class="upload_file ajax" id="azerty" href="uploader/get_form/reference/azerty">Upload une image</a></footer>
</section>

1 个解决方案

解决方案1
 0 已采纳  2012-12-15 15:09:17

solved, the problem wasn't with the colorbox i just chenge the code from this: 解决了，问题不在于colorbox，我只是从中寻求代码： 

$('.albums').live('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    parent_id           = $(this).parents().eq(2)[0].id;
    parent_header       = $('#' + parent_id + ' header')[0].innerHTML;
    parent_section      = $('#' + parent_id + ' section')[0].innerHTML;
    parent_footer       = $('#' + parent_id + ' footer')[0].innerHTML;
    fragment            = $(this).attr('href').split('/')[$(this).attr('href').split('/').length - 1];
    parent              = $(this).parents().eq(2)[0].id;
    if(fragment.indexOf('_-_') !== -1)
        page = fragment.replace('_-_', '/');
    else
        page = fragment;
    old_data[parent_id] = {'header': parent_header, 'footer': parent_footer, 'section': parent_section, 'link': parent + '/' + page};
    $.post('files/get_page', { page: old_data[parent_id]['link'] }, function(data){
        ret     = JSON.parse(data);
        a       = $('<a>').addClass('reset_link').attr('href', '#').append('Back To Albums');
        a.click(function(e){
            e.preventDefault();
            e.stopPropagation();
            this_parent_id      = $(this).parents().eq(1)[0].id;
            $('#' + this_parent_id + ' header').html(old_data[this_parent_id]['header']);
            $('#' + this_parent_id + ' section').html(old_data[this_parent_id]['section']);
            $('#' + this_parent_id + ' footer').html(old_data[this_parent_id]['footer']);
        })
        $('#' + parent).children().eq(0).html(a);
        $('#' + parent).children().eq(0).append(ret.header);
        $('#' + parent).children().eq(1).html('');
        for(i in ret.body.images){
            href            = ret.body.href + ret.body.images[i].image_name;
            image_id        = ret.body.images[i].image_id;
            delete_div_id   = 'delete_image_' + image_id;
            body            = $('<div>').addClass('albums_div');
            delete_div      = $('<div>').addClass('delete').append('&#10006; Supprimer').attr('id', image_id);
            a               = $('<a>').addClass('lightbox').attr('href', href);
            a.attr('onclick', 'return false;');
            a.append('&#9673; ' + ret.body.images[i].image_name);
            delete_div.click(function(){
                id          = delete_div_id;
                id_array    = id.split('_');
                $.post('files/delete', { id: image_id, del: id_array[1] }, function(data){
                    $(body).remove();
                });
            });
            body.append(a);
            body.append(delete_div);
            $('#' + parent).children().eq(1).append(body);
            $('.lightbox').colorbox({rel: 'group1'});
        }

        footer  = $('<a>').addClass(ret.footer['attr'].class).attr('id', ret.footer['attr'].id).attr('href', ret.footer['href']);
        footer.append(ret.footer['text']);
        footer.click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $.colorbox({href: ret.footer['href']});
        });
        $('#' + parent).children().eq(2).html(footer);
    });
});

to this: 对此： 

$('.albums').live('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    parent_id            = $(this).parents().eq(2)[0].id;
    parent_header        = $('#' + parent_id + ' header')[0].innerHTML;
    parent_section       = $('#' + parent_id + ' section')[0].innerHTML;
    parent_footer        = $('#' + parent_id + ' footer')[0].innerHTML;
    fragment             = $(this).attr('href').split('/')[$(this).attr('href').split('/').length - 1];
    parent               = $(this).parents().eq(2)[0].id;
    if(fragment.indexOf('_-_') !== -1)
        page = fragment.replace('_-_', '/');
    else
        page = fragment;
    old_data[parent_id]   = {'header': parent_header, 'footer': parent_footer, 'section': parent_section, 'link': parent + '/' + page};
    $.post('files/get_page', { page: old_data[parent_id]['link'] }, function(data){
        ret = JSON.parse(data);
        swap_content(ret);
    });
});
function swap_content(ret){
    a      = $('<a>').addClass('reset_link').attr('href', '#').append('Back To Albums');
    a.click(function(e){
        e.preventDefault();
        e.stopPropagation();
        this_parent_id = $(this).parents().eq(1)[0].id;
        $('#' + this_parent_id + ' header').html(old_data[this_parent_id]['header']);
        $('#' + this_parent_id + ' section').html(old_data[this_parent_id]['section']);
        $('#' + this_parent_id + ' footer').html(old_data[this_parent_id]['footer']);
    })
    $('#' + parent).children().eq(0).html(a);
    $('#' + parent).children().eq(0).append(ret.header);
    $('#' + parent).children().eq(1).html('');
    for(i in ret.body.images){
        href            = ret.body.href + ret.body.images[i].image_name;
        image_id        = ret.body.images[i].image_id;
        delete_div_id   = 'delete_image_' + image_id;
        body            = $('<div>').addClass('albums_div');
        delete_div      = $('<div>').addClass('delete').append('&#10006; Supprimer').attr('id', image_id);
        a               = $('<a>').addClass('lightbox').attr('href', href);
        a.attr('onclick', 'return false;');
        a.append('&#9673; ' + ret.body.images[i].image_name);
        delete_div.click(function(){
            id          = delete_div_id;
            id_array    = id.split('_');
            $.post('files/delete', { id: image_id, del: id_array[1] }, function(data){
                $(body).remove();
            });
        });
        body.append(a);
        body.append(delete_div);
        $('#' + parent).children().eq(1).append(body);
        $('.lightbox').colorbox({rel: 'group1'});
    }

    footer = $('<a>').addClass(ret.footer['attr'].class).attr('id', ret.footer['attr'].id).attr('href', ret.footer['href']);
    footer.append(ret.footer['text']);
    footer.click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $.colorbox({href: ret.footer['href']});
    });
    $('#' + parent).children().eq(2).html(footer);
}

Explanation : the first code i had the creation of the elements happens globally so every time the code executes it overwrite the variables and i'm assigning the the colorbox to the click function here: 说明：我创建元素的第一个代码全局发生，因此，每次代码执行时，它都会覆盖变量，并且我在此处将colorbox分配给click函数： 

footer.click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $.colorbox({href: ret.footer['href']});
});

so every time the footer variable gets rewritten over that click gets reassigned to the new footer that's why colorbox sends the data to the wrong url so all i have to do is to make those variables local to a function in this case the swap_content() function now each footer is unique and therefore colorbox will send the data to the right url. 因此，每次在该页脚上重写该页脚变量时，该页脚都将重新分配给新页脚，这就是为什么colorbox将数据发送到错误的url的原因，所以我要做的就是在这种情况下使这些变量成为函数的局部变量，swap_content（）函数现在每个页脚都是唯一的，因此colorbox会将数据发送到正确的url。 thanks for those who tried to answer. 感谢那些试图回答的人。 hope this helps anyone. 希望这对任何人有帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将URL参数传递给Colorbox - Passing a URL Parameter to a Colorbox 任何网址的颜色框模式 - Colorbox modal of any URL html get方法发送错误的URL - html get Method sending wrong url 使用colorbox加载外部URL然后截断 - Load external url with colorbox then truncate 在jquery colorbox / lightbox中打开url - open url in jquery colorbox/lightbox Colorbox和pinterest按钮的URL更新 - Colorbox and pinterest button URL updating Colorbox未在IE中加载ajax URL - Colorbox not loading ajax URL in IE 将外部网址链接到Colorbox中的标题 - Link an external url to the Title in Colorbox 如何在颜色框内容中获取颜色框请求URL - How to get colorbox request URL within colorbox content 将jQuery色彩盒颜色发送到其他元素 - Sending jQuery colorbox color to an additional element
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM