JQuery / JS Ошибка, когда на странице, которая не имеет идентификатора - PullRequest
Новая
       18

JQuery / JS Ошибка, когда на странице, которая не имеет идентификатора

0 голосов
/ 21 сентября 2011

У меня есть ситуация, я уверен, что это нечто базовое, что я просто не знаю правильный синтаксис / последовательность для:

У меня на сайте $(document).ready(function() есть следующий код: 

$(document).ready(function() {

//Prevents default anchor tag behavior
$('#socialScroller a, #contributePod a, .prev, .next').click(function(e) {
    e.preventDefault();
});


//Scrollable for Social Sidebar area
$(".socialScrollable").scrollable({ easing:"easeInOutCubic", vertical:true, next:".socialNext", prev:".socialPrev"});
  var scrollable = jQuery(".socialScrollable").data("scrollable");
  var size = 3;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.socialNext").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });

//Scrollable for History page
$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();

//Scrollables for Media page
$(".mediaScrollable").scrollable({ easing:"easeInOutCubic"}).navigator({navi:'#pressNavTabs'});

$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic", next:".nextMedia", prev:".prevMedia"});
  var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
  var size = 4;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.nextMedia").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });


$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic"});

//History Scroller
$(function() {      
    $(".vertHistoryScroller").scrollable({ vertical:"true", easing:"easeInOutCubic", next:".nextVert", prev:".prevVert" }).navigator(); 
});

//Contribute Sidebar Actions
$(".contributeContainer").hide();

$("#contributePod a").click(function(){
    var aData = $(this).attr("data-name");
    $(".contributeContainer").fadeOut("fast");
    $("#"+aData).fadeIn("slow");
});

$(".contributeContainer a").click(function(){
    $(this).parent(".contributeContainer").fadeOut("fast");
});

});

На любой странице, на которой нет #mediaNavScrollable, я получаю эту ошибку в консоли JS: Uncaught TypeError: Невозможно вызвать метод 'onSeek' с неопределенным значением.

Если я прокомментирую все, начиная со строки «var scrollable», все будет нормально работать на страницах без идентификатора #mediaNavScrollable. Как мне обернуть этот JS, чтобы он срабатывал только при наличии #mediaNavScrollable?

Ответы [ 5 ]

1 голос
/ 21 сентября 2011

Вам необходимо проверить, не является ли scrollable нулевым и содержит ли в нем какие-либо элементы.Если это не так, выйдите из обработчика. 

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) return;

Это приведет к выходу из обработчика без выполнения какого-либо другого кода.Кроме того, вы можете использовать блок if: 

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) 
{
    //element doesnt exist, perform alternate action
}
else
{
    //element does exist, do normal stuff here
    scrollable.onSeek(......);
}
0 голосов
/ 21 сентября 2011

Это не вызвано отсутствующим элементом.Если элемент отсутствует, вы никогда не попадете в код, где происходит ошибка. edit - упс, я не прокрутил код OP достаточно далеко вправо;Я думал, что приведенный ниже код, который смущает отступ, был частью функции-обработчика.

Вместо этого проблема в том, что это: 

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");

ничего не возвращает.В вашем элементе mediNavScrollable не хранится элемент данных с именем «прокручиваемый».Это может означать, что элемент в вашем HTML должен выглядеть следующим образом: 

<div id='mediaNavScrollable' data-scrollable='something'>

, но я в чем-то сомневаюсь, так как этот код, похоже, ожидает, что он будет элементом DOM.(Вроде неприятного сочетания обработчиков jQuery и DOM 0 старого стиля).Это означает, что для того, чтобы код работал, вам нужно, чтобы этот элемент не только находился на странице, но что-то должно было прикрепить ссылку на узел DOM в хранилище данных jQuery для элемента.

0 голосов
/ 21 сентября 2011

Необходимо проверить наличие прокручиваемого: 

if(scrollable)
{ 
  ...
}
0 голосов
/ 21 сентября 2011

Вы можете проверить, существует ли элемент первым, например: 

if ($("#mediaNavScrollable").length) {
  //your code here
}
0 голосов
/ 21 сентября 2011 
if ($("#mediaNavScrollable").length){
      // your code
}
...