Добавленный элемент продолжает добавляться (бесконечно) после прокрутки, он должен добавляться только один раз

Question

Я уже добавил div к форме (после прокрутки), моя проблема в том, что этот div продолжает появляться бесконечно, когда пользователь прокручивает.

Вы можете увидеть этот div на этом сайте http://www.cimacademico.ml/online/cursos-online/curso-detalle-ejemplo/, это закрывающий x, который появляется в углу формы после прокрутки 800px.

jQuery(function() {
jQuery(window).scroll(function() {    
    var scroll2 = jQuery(window).scrollTop();
    if (scroll2 >= 800) {      
        jQuery(".form-curso-detalle").append("<div class='closeform'>X</div>");
        jQuery(".closeform").click(function() {
        jQuery(this).parent().fadeOut(100);
        })
    } else {
        jQuery('.closeform').empty().remove();
        jQuery(".form-curso-detalle").fadeIn(100);
    }
});

});

Я стремлюсь к тому, чтобы div добавлялся только один раз,Спасибо за ваше время.

Answer 1

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

jQuery(function() {
   jQuery(window).scroll(function() {    
     var scroll2 = jQuery(window).scrollTop();
     if (scroll2 >= 800 && jQuery('.closeform').length == 0) {
        jQuery(".form-curso-detalle2").append("<div class='closeform'>X</div>");
     } else {
        jQuery('.closeform').empty().remove();
        jQuery(".form-curso-detalle2").fadeIn(100);
     }
   });

   //this handler is added to body so that it works 
   //even if the element doesn't already exists
   jQuery("body").on("click", ".closeform", (function() {
      jQuery(this).parent().fadeOut(100);
   })
});

Answer 2

Решено! Спасибо Nawed и Рори!

jQuery(function() {
jQuery(window).scroll(function() {    
    var scroll2 = jQuery(window).scrollTop();
    if (scroll2 >= 800) {      
        if(jQuery('.closeform').length == 0) {
        jQuery(".form-curso-detalle2").append("<div class='closeform'>X</div>");
        }
        jQuery(".closeform").click(function() {
        jQuery(this).parent().fadeOut(100);
        })
    } else {
        jQuery('.closeform').empty().remove();
        jQuery(".form-curso-detalle2").fadeIn(100);
    }
});
});