jquery после ajax complete / done, чтобы вызвать функцию, функция будет выполняться все больше и больше раз. Зачем?

Question

Я застрял в этом вопросе около 2 дней. Мой код ( JSFiddle здесь ), таким образом:

var foo = function(){
    // The code in here will be execute more and more and more times
    $(element).hover(function() {
        console.log("buggie code run")
    })
}

var sliderShow = $(secondElement).bxSlider({
    onAfterSlide:function(currentSlideNumber) {
        $.ajax("/echo/html/").done(function() {
            foo();
        })
    }
})

Моя проблема в том, что код будет выполняться более одного раза. Например, когда вы наводите курсор на элемент, он запускает функцию один раз, а во второй раз - дважды. В третий раз выстрелит 3 раза и тд. Почему это происходит? Я делаю основную логическую ошибку, или этот JavaScript что-то делает?

Answer 1

Это означает, что вы регистрируете событие более одного раза, вероятно, при каждой загрузке.Вы должны сделать это только один раз!

Answer 2

При наведении курсора вызывает функцию дважды: один раз при входе и один раз при выходе.Во втором слайдере вы снова добавите обработчик событий и так далее.

Посмотрите на http://docs.jquery.com/Namespaced_Events