CODEWITHSUNDEEP
javascriptjquery
Adam Beizsley-Pycroft
Adam Beizsley-Pycroft

Reputation: 83

jQuery - Why does my function break if called on document.ready?

I'm doing some HTML prototyping to explore some UX stuff. Whilst trying to work out why a Javascript function (which uses a lot of jQuery) wasn't working I broke it out into a JS Fiddle. It seems that when the function is called on document.ready it won't work and can't be executed with a click event. However, if it isn't called at document.ready then it will work! I'm probably missing something obvious...

Working: 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');
    }

Not Working: 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');
}

Upvotes: 0

Views: 585

Answers (1)

Raja Jaganathan
Raja Jaganathan

Reputation: 36167

You trying to get $("#testDiv"),$("#anotherDiv"),$("thirdDiv") before DOM ready event fired that's where the exact problem.Try after DOM ready fired

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

So get $("#testDiv"),$("#anotherDiv"),$("thirdDiv") after DOM ready event dispatched.

 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');


   }

Upvotes: 1

Related Questions