最有效的方法來製作jQuery鏈接？

Question

所以，我有這個網站here其中頁面上的每個「瓷磚」是外部頁面的書籤。然而，當我使用傳統的錨標籤並在「tiles」中使用jQuery-ui可移動和可調整大小的效果時，我遇到了問題。

即使在重新排列圖塊後，鏈接仍會保留。

所以，我需要嘗試一個純粹的jQuery（或更高效的JavaScript）解決方案。

我正在考慮只使用window.location和jQuery的.click()，但我需要一些幫助插入到我先前存在的jQuery腳本中。

這是我目前有：

$(document).ready(function() { 

// We have a hidden field which knows if the tiles are editable (1) or not (2) now just let's make sure it is initiated with zero value because the startup state of button will be "Edit" 
$("#editable").val('0'); 

// Loop through the tiles by class 
$('.tile').each(function(){ 

    // Get the positions from cookies 
    var toppos = $.cookie('uiposy'+$(this).attr('id')); 
    var leftpos = $.cookie('uiposx'+$(this).attr('id')); 

    // Apply saved positions 
    $(this).css('top',toppos+'px'); 
    $(this).css('left',leftpos+'px'); 

    // Get the sizes from cookies 
    var sizew = $.cookie('uisizew'+$(this).attr('id')); 
    var sizeh = $.cookie('uisizeh'+$(this).attr('id')); 

    // Apply saved sizes 
    $(this).css('width',sizew+'px'); 
    $(this).css('height',sizeh+'px'); 
}); 

// Set the tiles as draggable 
$('.tile'). 
draggable({ 
    containment: '#content', 
    scroll: false, 
    // Watch out for drag action 
    stop: function (event, ui) { 
    // Store x/y positions in a cookie when they're dragged 
    $.cookie('uiposx'+$(this).attr('id'), ui.position.left, { path: '/', expires: 7 }); 
    $.cookie('uiposy'+$(this).attr('id'), ui.position.top, { path: '/', expires: 7 }); 
    } 
}); 

// Set the tiles as resizable 
$('.tile').resizable({ 
    maxHeight: 200, 
    maxWidth: 200, 
    minHeight: 100, 
    minWidth: 100, 
    // Watch out for resize action 
    stop: function (event, ui) { 
    // Store width/height values in a cookie when they're resized 
    $.cookie('uisizew'+$(this).attr('id'), ui.size.width, { path: '/', expires: 7 }); 
    $.cookie('uisizeh'+$(this).attr('id'), ui.size.height, { path: '/', expires: 7 }); 
    } 
}); 

// Make resiable and draggable disabled on start 
$(".tile").resizable("option", "disabled", true).removeClass('ui-state-disabled'); 
$(".tile").draggable("option", "disabled", true).removeClass('ui-state-disabled'); 

// Function to run when the editButton is clicked 
$('#editButton').click(function() { 

    // Store our "state" in boolean form. 
    var state = ($("#editable").val() == 0) ? false : true; 

    // State is true, this means we will disable the tiles. 
    // Make the button text "edit" and change the hidden #editable field value to "0" 
    if (state) { $("#editable").val('0'); $(this).val('Edit'); $('.tile').css('cursor', 'pointer'); } 

    // State is true, this means we will enable the tiles. 
    // Make the button text "Done" and change the hidden #editable field value to "1" 
    else { $("#editable").val('1'); $(this).val('Done'); $('.tile').css('cursor', 'move'); } 

    // Apply the state to tiles. also remove the ui-state-disabled class to make sure they're not faded. 
    $(".tile").resizable("option", "disabled", state).removeClass('ui-state-disabled'); 
    $(".tile").draggable("option", "disabled", state).removeClass('ui-state-disabled'); 

}); 

}); 

如果任何人有最有效的方式建議實現這一點，並在插入這個代碼，爲什麼，請讓我知道。

謝謝！

Answer 1

您可以在設置功能的Click事件處理程序的任何地方綁定到你的瓷磚，像這樣：

$('.tile').bind('click',function (event) { 
if ($("#editable").val() == 0) window.location.href= <your URL here>; 
}); 

這隻會跟隨鏈接時，你的鏈接是不可編輯，否則會被忽略。