使用jQuery触发链接单击时的“未定义”功能

Question

For some reason this works in FF 11, Chrome, and even in IE but not in FF 3.6 or Safari 5.

Basically I'm triggering the click of a link with:

var $currentItem = $('#' + currentId);
var modalSeriesList = $('.js-modal-series');
var index = modalSeriesList.index($currentItem);
var $nextItem = modalSeriesList[index + 1];

var nextClick = function() {
    $(document).off('keydown.general');
    $nextItem.click();
}

$(document).off('keydown.general');

if ($nextItem) {
    $nextButton.click(nextClick);
}​

But when I click on the link in FF 3.6 or Safari 5 I get the following error:

TypeError: 'undefined' is not a function (evaluating '$nextItem.click()')

Is there any particular "gotcha" that I don't know about here using the following method?

Answer 1

Try .eq() so $nextItem is a jQuery collection:

var $nextItem = modalSeriesList.eq(index + 1);

// ...

$nextItem.click()

Using [...] retrieves the DOM Object, which doesn't have a .click() method.

Answer 2

You could try

if( typeof $nextItem == 'undefined' ){
    $nextButton.trigger('click');
}

instead of

if ($nextItem) {
    $nextButton.click(nextClick);
}​

Answer 3

if you turn condition of if statement into

if(typeof $nextItem == 'undefined' )

it works. As Porco said probably $nextItem does not exist....