Почему document.ready пожар после события click

Question

У меня есть основное слайд-шоу, созданное для моей домашней страницы.

После правильной загрузки документа я нажимаю на свой тег, чтобы запустить событие click. Он работает правильно, но затем загрузка документа начинается потом и сбрасывает все обратно в начало.

Возможно, это очевидно, но я не вижу проблемы. Вот код:

function forwardClick(){ 
    var Links = loadLinks(); 
    imgNumber = currentImgNumber(); 
    //now calculate the next Id 
    imgNumber = Math.min(Links.length - 1, imgNumber + 1); 
    nextSlider(imgNumber, Links); 
} 

function nextSlider(imgNumber, Links){ 

    //set the link for current slide 
    populateLinkAndImage(Links, imgNumber); 

    //replace the text of the hidden field with the current imgNum 
    $('#counter').html(imgNumber.toString()); 
} 

function populateLinkAndImage(Links, imgNumber){ 
    //now replace the existing image and text with the correct ones for the current imgNumber 
    $("#imgHolder").attr("src", Links[imgNumber]["imgLink"]); 
    $("#linkHolder").attr("href", Links[imgNumber]["aLink"]); 
    $("#linkHolder").html(Links[imgNumber]["text"]); 
} 

function loadLinks(){ 
    var Links = []; 
    var link0 = { imgLink: "Images/L/ipad.jpg", text: "Use our In Depth Guide to create a super profitable Hair and Beauty Salon", aLink: "P/Managing/Running-The-Perfect-Hair-Salon.aspx" }; 
    var link1 = { imgLink: "Images/L/ipad-sample-2.jpg", text: "Starting, buying or planning a new Cafe, build a rock solid plan here", aLink: "P/Managing/CafePlanner.aspx" }; 
    Links.push(link0); 
    Links.push(link1); 

    return Links; 
} 

function currentImgNumber(){ 
    //first find id number of current image loaded 
    //could use hidden field or loop through the array to find its index 
    //using hidden field 
    imgText = $("#counter").html(); 
    imgNumber = parseInt(imgText, 10); 
    return imgNumber; 
} 

$(document).ready(function() { 

    var Links = loadLinks(); 

    //set the link for current slide 
    populateLinkAndImage(Links, 0, ""); 

    //set the user interaction events 
    $(".next").click(function() { 
     forwardClick(); 
    }); 

}); 

Спасибо для смотреть

Answer 1

Вы должны предотвратить поведение по умолчанию для ссылок тега:

$(".next").click(function (e) { 
     e.preventDefault(); 
     forwardClick(); 
    });