jquery - 要素を追加した後にjQuery hasClassが動作しない

Question

ご覧のとおり、さまざまな要素を取得してイベントをバインドするために、各「li」をループしています。関数 refreshThis() は、ajax からのコールバックが成功した後に呼び出され、dom を「リロード」し、各要素を再度取得してクリック イベントをバインドします。

私が実行した場合：

console.log($(this).hasClass('expanded'));

複数の「true」と「false」が表示されます。クリックイベントが複数回バインドされているようです。

コールバックで refreshThis() を実行しないと、クリックが機能しません。私はこのような .on を使用してみました:

$('#nearestStaticDIV').on('click', $fetchComments, function() {

それ以外の

$fetchComments.click(function() {

これにより、すべてのクリックが一度にトリガーされます。

DOM を更新した後でも、hasClass を正しく動作させるにはどうすればよいですか?

ありがとうございました！:)

非常に単純化されたコード:

function refreshThis(){

$postlist.children('li').each(function() {

var list = $(this);
var $fetchComments = list.find('h1'); // click this to fetch replies

function fetchReplies() {
...
}

$fetchComments.click(function() { // fetch replies

    if ($(this).hasClass('expanded')) { 
        ...
    } else {
        fetchReplies();
    }

});

$commentPostBtn.click(function(event) {

        $.ajax({
            ...
            success: function(data) {
                refreshThis();
        });
    }
    event.preventDefault();
});

});
}

refreshThis();