Бесконечный прокрутки Нарушение jQuery Событие

Question

У меня есть функция в jQuery, что, когда вы наводите курсор на div, он исчезает и показывает другой div на своем месте. Функция работает хорошо, пока я не загружаю элементы с помощью Ajax для бесконечной прокрутки. Я знаю, что это связано с привязкой новых элементов (из того, что я прочитал, используя on()), но поскольку я новичок в jQuery, я понятия не имею, как реализовать это изменение. Я пытаюсь последние несколько часов, но не добились успеха.

(Конкретная проблема: new_social парения сломана на АЯКС нагрузки для новых загруженных элементов)

Любая помощь будет высоко ценится, особенно в форме кода! Спасибо!

Вот функции:

$("a.share").hover(function(){ 
    $(this).closest($('div.new_story')).children("div.new_social_buttons").show(); 
    $(this).closest(".new_social").hide(); 
}, 
function(){ 
    }); 


$("div.new_social_buttons").hover(function(){ 

}, 
function(){ 
    $(this).hide(); 
    $(this).closest($('div.new_story')).children("div.new_social").show(); 
}); 

Вот функция Аякса нагрузка:

jQuery.ias({ 
container : '#middle', 
item: '.new_story', 
pagination: '#pagination', 
next: 'a.next', 
loader: '<img src="loader.gif"/>', 
history: false 

}); 

Вот где я получил бесконечный свиток, я думаю, что это имеет JQuery за вызов функции: https://github.com/webcreate/Infinite-Ajax-Scroll

Еще раз спасибо!

Answer 1

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

Делегированной a.share обработчик

$(document).on({ 
    mouseenter: function(){ 
     $(this).closest($('div.new_story')).children("div.new_social_buttons").show(); 
     $(this).closest(".new_social").hide(); 
    }, 
    mouseleave: function(){ 
     //looks like nothing going on here; just providing for future ref. 
    } 
}, 'a.share'); 

Делегированной div.new_social_buttons обработчик

$(document).on({ 
    mouseenter: function(){ 
     //looks like nothing going on here; just providing for future ref. 
    }, 
    mouseleave: function(){ 
     $(this).hide(); 
     $(this).closest($('div.new_story')).children("div.new_social").show(); 
    } 
}, 'div.new_social_buttons');  

При использовании .on() вы не можете использовать обычный метод .hover() обертку. Вместо этого вы должны предоставить объект мыши mouseenter and с объявленной функцией.

Также важно отметить, что вы должны заменить document на любой статический родительский элемент, чтобы сохранить производительность. Поскольку делегированные селектора jQuery используют метод javascript querySelectorAll(), прирост производительности будет незначительным, но может стать обременительным на глубоко вложенном сайте. Вот почему я предлагаю привязать к чему-то ниже внутри статического дерева.