Нокаут нажмите связывающие пожары после второго щелчка

Question

У меня есть связывание нокаута, который прокручивает в части, если страница по щелчку с этой функцией

scrollTo() { 
    $("a.scroll").click(function(event) { 
     event.preventDefault(); 
     $('body').animate({ 
      scrollTop: $(this.hash).offset().top 
     }, 500); 
    }); 
} 

HTML, где я вызываю функцию

<a class="scroll icon-arrow-down" href="#part" data-bind="localizedText: { id: '4-anchor-1', html: true }, tap: controller.scrollTo.bind(controller)"></a> 

проблема в том, что он срабатывает после второго щелчка, а не первого. Также это происходит, когда вы нажимаете на кнопку, когда вы нажимаете кнопку, она не срабатывает, щелкая ее снова, она срабатывает, а затем она нормально работает на другой кнопке.

Answer 1

Проблема в том, что при первом нажатии вы вызываете scrollTo(), который связывает событие. Затем в следующий и каждый последующий щелчок вы добавляете еще один обработчик click(), а также выполняете все предыдущие обработчики событий click. Вам просто нужно удалить функцию scrollTo() и добавить событие на нагрузке:

<a class="scroll icon-arrow-down" href="#part" data-bind="localizedText: { id: '4-anchor-1', html: true }"></a> 

$("a.scroll").click(function(event) { 
    event.preventDefault(); 
    $('body').animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 500); 
}); 

В качестве альтернативы, если a элемента добавляется в DOM динамически вам нужно будет использовать делегированный обработчик события:

$(document).on('click', "a.scroll", function(event) { 
    event.preventDefault(); 
    $('body').animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 500); 
}); 

Answer 2

Поскольку вы используете нокаут, не используйте привязки событий jQuery. Предполагая, что вы определили обработчик привязки tap (то есть, чтобы вызвать обработчик событий, например, click), ваша разметка HTML в порядке. Просто превратите свой метод scrollTo в обработчик событий.

scrollTo(event) { 
    event.preventDefault(); 
    $('body').animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 500); 
}