[英]colorbox sending to the wrong url?
一頁中有多個顏色框。
這些顏色框的鏈接是使用javascript生成的。
現在,每次生成用於打開顏色框的新鏈接時,與該顏色框關聯的所有單擊的鏈接都將轉到該新鏈接的URL。
這就是我聲明顏色框的方式:
$('.ajax').colorbox();
鏈接中的href正確,但仍發送到最后生成的鏈接的href。
提前致謝。
編輯:這是代碼我如何添加一些鏈接:
$('.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('✖ Supprimer').attr('id', image_id);
a = $('<a>').addClass('lightbox').attr('href', href);
a.attr('onclick', 'return false;');
a.append('◉ ' + 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);
});
});
注意:代碼會使用正確的href生成正確的鏈接,但顏色框本身會出現問題。 我知道這一點,因為我這樣做是:
我將實時點擊事件分配給帶有顏色框的鏈接,如下所示:
$(".upload_file").live('click', function(){
console.log($(this)[0].href);
});
並且href打印到控制台的右側,但是在顏色框中顯示的頁面錯誤。
編輯2添加HTML:
javascript更改代碼之前的頁面:
<section id="reference">
<header class="inner_header"><h3>RÉFÉRENCE PAGE SECTION</h3></header>
<section>
<h4>Choose an album :</h4>
<div class="albums_div">
<a href="res_yass" onClick="return false;" class="albums">★ Résidence YASSINE</a>
<div class="delete" id="delete_album_1">✖ Supprimer</div>
</div>
<div class="albums_div">
<a href="res_nesr" onClick="return false;" class="albums">★ Résidence NESRINE</a>
<div class="delete" id="delete_album_2">✖ Supprimer</div>
</div>
<div class="albums_div">
<a href="azerty" onClick="return false;" class="albums">★ Azerty</a>
<div class="delete" id="delete_album_8">✖ 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>
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>
解決了,問題不在於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('✖ Supprimer').attr('id', image_id);
a = $('<a>').addClass('lightbox').attr('href', href);
a.attr('onclick', 'return false;');
a.append('◉ ' + 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);
});
});
對此:
$('.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('✖ Supprimer').attr('id', image_id);
a = $('<a>').addClass('lightbox').attr('href', href);
a.attr('onclick', 'return false;');
a.append('◉ ' + 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);
}
說明:我創建元素的第一個代碼全局發生,因此,每次代碼執行時,它都會覆蓋變量,並且我在此處將colorbox分配給click函數:
footer.click(function(e){
e.preventDefault();
e.stopPropagation();
$.colorbox({href: ret.footer['href']});
});
因此,每次在該頁腳上重寫該頁腳變量時,該頁腳都將重新分配給新頁腳,這就是為什么colorbox將數據發送到錯誤的url的原因,所以我要做的就是在這種情況下使這些變量成為函數的局部變量,swap_content()函數現在每個頁腳都是唯一的,因此colorbox會將數據發送到正確的url。 感謝那些試圖回答的人。 希望這對任何人有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.