У меня есть список<div> s с тем же html, но разными значениями внутри html. Иерархия следующая;

<div id="element">
    <div class="likecomm">
        <a class="commenticon" href="#">...some value according to the returning value...</a>
    </div>
</div>

<div id="element">
    <div class="likecomm">
        <a class="commenticon" href="#">...some value according to the returning value...</a>
    </div>
</div>

В случае, я вставляю HTML в верхнюю часть списка, который является еще одним<div id="element> ... </div>

У меня есть следующий обработчик событий для клика по иконке комментария;

$('.commenticon').click(function(){
    $(this).closest('.actionframe').next('nav').slideToggle(300);
    return false;
});

Он работает правильно, пока я не вставлю новый<div id="element> ... </div>, Обработчик события щелчка значка комментария не совпадает. Я искал об этой проблеме, все говорили, что.delegate() должен быть использован.

Моя проблема в том, что я не знаю, где использовать функцию делегата. Раньше я получал результаты от ajax, чтобы ввести<div id="element> ... </div> , Я использовал.delegate() функция в вызове ajax, который внедряет HTML.

$.ajax({

    success:function(data) {

        var html=... // the necessary div html binded with data
        // prepend function call()

        $('.likecomm').delegate(".commenticon","click" , function() {                      
                       $(this).closest('.actionframe').next('nav').slideToggle(300);
                       return false;
        }); 

    }        
});

В настоящее время это не работает. Итак, есть идеи, как заставить эту вещь работать?