colorbox發送到錯誤的網址？

這些colorbox的鏈接是用javascript生成的。

現在，每次打開一個colorbox的新鏈接都會生成，任何與colorbox關聯的點擊鏈接將轉到該新鏈接的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('&#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); 
    }); 
});

注：代碼生成與正確HREF，但在顏色框它自身問題的正確鏈接。我知道這一點，因爲我這樣做：

我分配了一個活的單擊事件的聯繫與顏色框是這樣的：

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

，並打印到控制檯中的href是正確的，但是那是頁面顯示在彩盒中是錯誤的。

編輯2添加HTML：

的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>

後的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>

來源

2012-12-13 Yahya KACEM

你可以jsfiddle嗎？ –

需要更多信息。像代碼或 – LPD

需要很長時間才能準備，因爲它集成在一個幾乎完整的網站中，問題是當生成新鏈接時，每次單擊任何其他鏈接時，colorbox都會獲取該鏈接的href。它不應該那樣做，但它確實如此。 –

解決，問題不在於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); 
    }); 
});

這樣：

$('.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); 
}

說明： 第一碼我有元素的創建全球發生所以每次代碼執行它覆蓋的變量和我指定的時間顏色框到這裏的點擊功能：

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

所以每次頁腳變量都被重寫了c舔得到重新分配給新的頁腳，這就是爲什麼colorbox發送數據到錯誤的網址，所以我所要做的就是讓這些變量本地的功能在這種情況下swap_content（）函數現在每個頁腳是唯一的，因此colorbox將發送將數據發送到正確的url。感謝那些試圖回答的人。希望這可以幫助任何人。

來源

2012-12-15 15:09:17

colorbox發送到錯誤的網址？

回答

相關問題