jQuery slideDown () не работает правильно с результатом AJAX

0

Я хочу, чтобы мышка зависала над именем пользователя, оно должно вывести полное имя пользователя, которое является display: none; в CSS. Это прекрасно работает, однако, если вы нажмете на кнопку " Загрузить больше", она загрузит оставшиеся комментарии через AJAX и добавит их в существующие, но если вы наведете имя пользователя из одного из них, оно отобразит полное имя всех имен пользователей с исключением первых двух.

HTML:

<div class = 'rows'>
    <div class='feed_blocks'>
        <div class='feeds'>
        <!-- user post goes here -->
            <div class = 'comment_data'>
                <div class = 'per_comment'> <!-- two comments are displayed first -->
                    <a href = '#'><p class = 'usernames'>username</p></a>
                    <div class = 'commenter_details'>
                        <p> commenter_full_name </p>
                    </div>
                    <p>comments..</p>
                </div> <!-- end of div per_comment -->
                <div class = 'morecomments'><p> Load more </p> </div>
            </div><!-- end of div comment_data -->
        </div><!-- end of div feeds -->
    </div><!-- end of div feed_blocks -->
</div><!-- end of div rows -->

CSS:

.commenter_details {
background: cadetBlue;
color: white;
position: absolute;
padding: 3px;
margin-top: -10px;
margin-left: 10px;
z-index: 100;
display: none;
}

Jquery:

$('.per_comment').on('mouseenter', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$('.feeds').on('mouseleave', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').hide();
});

AJAX:

<div class = 'per_comment'> <!-- two comments are displayed first -->
    <a href = '#'><p class = 'usernames'>username</p></a>
    <div class = 'commenter_details'>
        <p> commenter_full_name </p>
    </div>
    <p>comments..</p>
</div> <!-- end of div per_comment -->

Любая помощь, которая позволит иметь работу вокруг этого, будет глубоко оценена.

  • 0
    Что такое смесь html / css / jquery?
  • 0
    Вам нужно показать HTML после загрузки AJAX. Я думаю, это не выглядит точно как начальная загрузка по какой-то причине.
Показать ещё 1 комментарий

1 ответ

2

Это работает для меня:

$(document).on('mouseenter', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$(document).on('mouseleave', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').hide();
});

http://jsfiddle.net/KHd8w/5/

  • 0
    Это работает только тогда, когда AJAX возвращает только один комментарий. У меня есть более одного комментария, которые возвращаются через AJAX.
  • 1
    jsfiddle.net/KHd8w/6 Работает для кратных в моем случае.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню