jQuery функция щелчка не установлена ​​правильно

Question

Я пытаюсь написать многоразовый бит кода для прикрепления событий прокрутки к клику на различные узлы DOM с использованием атрибутов данных. Вот то, что я до сих пор:

HTML

<li class="scroll-to-anchor" data-dest='top'></li> 

<div id='top'></div> 

JS

if ($('.scroll-to-anchor').length) { 
    $('.scroll-to-anchor').each(function() { 
     var instance = $(this); 
     if ($(this).attr('data-dest')) { 
      var destination = $(this).data('dest'); 
      if ($('#' + destination).length) { 
       instance.click(function() { 
        alert('click'); 
        // Scroll to destination 
       }) 
      } else { 
       throw 'Not a valid scroll-to anchor' 
      } 
     } else { 
      throw 'No data attribute present' 
     } 
    }); 
} 

Как вы можете видеть, функция должна:

1. Проверьте, если существуют любые узлы .scroll-to-anchor
2. Если они делают, запускать их через каждый
3. Проверьте, .scroll к якорю имеет атрибут данных Dest
4. Если это произойдет, убедитесь, что атрибут соответствует узлу DOM
5. , если он прилагается событие click

Все работает нормально, но событие click не прилагается. У меня есть ощущение это сфера связаны, но я не могу понять это ...

Answer 1

throw может сломать вашу петлю. Вместо этого вы можете использовать console.error().

$(".scroll-to-anchor").each(function() { 
    var instance = $(this), 
     destination = instance.data('dest'), 
     element = $("#" + destination); 

    if (destination) { 
     if (element) { 
      instance.on("click", function() { 
       console.info("Anchor clicked"); 
       $('html, body').animate({ 
        scrollTop: element.offset().top 
       }, 500); 
      }); 
     } else { 
      console.error("Destination not found"); 
     } 
    } else { 
     console.error("No destination specified"); 
    } 
}); 

Answer 2

проверить эту JsFiddle

HTML

<a id="top"></a> 
<div class="scroll-to-anchor" data-dest="top">sdlkjfs</div> 

JS

$('.scroll-to-anchor').each(function() { 
    var instance = $(this); 
    if (instance.data('dest')) { 
     var destination = instance.data('dest'); 
     if ($('#' + destination).length) { 
      instance.click(function() { 
       alert('click'); 
       // Scroll to destination 
      }) 
     } else { 
      throw 'Not a valid scroll-to anchor' 
     } 
    } else { 
     throw 'No data attribute present' 
    } 
});