2013-12-20 2 views
0

У меня есть код jQuery, который загружает More comments сообщения через AJAX. More comments будет позже заменен Less comments , который, как ожидается, чтобы скрыть загруженные комментарии, но он не работает ...Как скрыть загруженные комментарии в jQuery

Это HTML-код:

<div class = 'feeds'> 
    <div class = 'comments'> 
    <div class = 'comment_data> 
     <div class = 'per_comment'> 
     <p> slideToggle!</p> 
     </div> 
     <div class = 'per_comment'> 
     <p> classToggle!</p> 
     </div> 
    <button class='morecomments' value='7' name = 'more' type='submit'> 
    More comments</button> 
    </div> 
</div> 
</div> 

JQuery код, который загружает больше комментариев, и работает просто отлично:

$(".morecomments").click(function() { 
    var $this = $(this); 
    var post_id = $(this).val(); 
    var request = $.ajax({ 
    url: "comments.php", 
    type: "POST", 
    data: { post : post_id }, 
    dataType: "html" 
    }); 
request.done(function(msg) { 
    $this.prev('.per_comment').html(msg); 
    $this.replaceWith("<button class='lesscomments value='7' name = 'less' type='submit'>Less comments</button>"); 
}); 
}); 

JQuery код, который я ожидал, чтобы скрыть загруженные комментарии, но он не работает:

$(".lesscomments").click(function() { 
var $this=$(this); 
$(".murconform").submit(function(e){ 
     return false; 
    }); 
    $this.prev('.comment_data').slideToggle('fast') 
}); 

Anticipatory спасибо.

+1

Есть еще несколько проблем .. элемент comment_data не является предшественником, это элемент-предок, также какова цель обработчика отправки в функции click ... try '$ (". murconform "). submit (функция (e) { return false; }); $ ('. Comment_data'). On ('click', ".lesscomments", function() { var $ this = $ (this); $ this.closest ('. Comment_data'). SlideToggle (' fast ') }); ' –

+0

' ближайший' сделал трюк. Вы просто сделали мою бессонную ночь продуктивной. Благодаря! – Yax

+0

еще раз, какова была цель обработчика отправки –

ответ

1

Поскольку меньше комментариев элемент создается динамически, вам нужно использовать event delegation

//this should not be within the less handler.... need to handle the logic in some other way 
$(".murconform").submit(function (e) { 
    return false; 
}); 
$('.comment_data').on('click', ".lesscomments", function() { 
    var $this = $(this); 
    $this.closest('.comment_data').slideToggle('fast') 
}); 
+0

Только что попробовал, но не работал ... Спасибо – Yax

1

Это происходит потому, что элемент lesscomments не существует на странице, когда он загружает.
И вы должны использовать document.ready для действия eetuar.
Старайтесь использовать эту функцию на: http://api.jquery.com/on/

Смежные вопросы