jQuery - Почему моя функция прерывается при вызове document.ready?

Question

Я делаю некоторые прототипы HTML, чтобы исследовать некоторые вещи UX. В то время как вы пытаетесь понять, почему функция Javascript (которая использует много jQuery) не работает, я разложил ее в JS Fiddle. Похоже, что когда функция вызывается на document.ready, она не будет работать и не может быть выполнена с событием клика. Однако, если он не вызывается в document.ready, тогда он будет работать! Я, вероятно, отсутствует что-то очевидное ...

работы:http://jsfiddle.net/NWmB5/

$(document).ready(function() { 
    $('#targetFirstDiv').click(function() { 
     setTimelinePosition($('#anotherDiv')); 
    }); 
    $('#targetSecondDiv').click(function() { 
     setTimelinePosition($('#testDiv')); 
    }); 
}); 
var toDoCategories = [$("#testDiv"),$("#anotherDiv")]; 
/* Show current position on timeline */ 
function setTimelinePosition($position) { 
    var $theTimelineTrigger = $('span.timelineTrigger'); 
     toDoCategories.forEach(function(currentCategory) { 
      var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger); 
      $($deselectTimelinePositionElement).removeClass('currentPosition'); 
     }); 
     var $selectTimelinePositionElement = ($($position,$theTimelineTrigger)); 
     $($selectTimelinePositionElement).addClass('currentPosition'); 
    } 

не работает:http://jsfiddle.net/NWmB5/5/

$(document).ready(function() { 
    setTimelinePosition($('#thirdDiv')); 
    $('#targetFirstDiv').click(function() { 
     setTimelinePosition($('#anotherDiv')); 
    }); 
    $('#targetSecondDiv').click(function() { 
     setTimelinePosition($('#testDiv')); 
    }); 

}); 
var toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; 

/* Show current position on timeline */ 
function setTimelinePosition($position) { 
    var $theTimelineTrigger = $('span.timelineTrigger'); 
    toDoCategories.forEach(function(currentCategory) { 
     var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger); 
     $($deselectTimelinePositionElement).removeClass('currentPosition'); 
    }); 
    var $selectTimelinePositionElement = ($($position,$theTimelineTrigger)); 
    $($selectTimelinePositionElement).addClass('currentPosition'); 
} 

Answer 1

Вы пытаетесь получить $ ("# testDiv") , $ ("# anotherDiv"), $ ("thirdDiv") до запуска готового события DOM, где есть точная проблема. Попытайтесь после готовности DOM

var toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; 

Получите $ ("# testDiv"), $ ("# anotherDiv"), $ ("thirdDiv") после отправки события DOM.

var toDoCategories; //NOTE HERE 

$(document).ready(function() { 

    toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; //NOTE HERE 

    setTimelinePosition($('#thirdDiv')); 

$('#targetFirstDiv').click(function() { 
    setTimelinePosition($('#anotherDiv')); 

}); 
$('#targetSecondDiv').click(function() { 
    setTimelinePosition($('#testDiv')); 

}); 

}); 


/* Show current position on timeline */ 
function setTimelinePosition($position) { 


      var $theTimelineTrigger = $('span.timelineTrigger'); 

    toDoCategories.forEach(function(currentCategory) { 


var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger); 

      $($deselectTimelinePositionElement).removeClass('currentPosition'); 
    }); 

    var $selectTimelinePositionElement = ($($position,$theTimelineTrigger)); 
    $($selectTimelinePositionElement).addClass('currentPosition'); 


    }