Подождите, пока addClass выполнит

Question

У меня проблема с jquery. То, что я пытаюсь сделать, - сделать одну и ту же кнопку двумя различными действиями в зависимости от класса. Кажется простым, но я застрял. Что у меня есть это:

$(".edit-comment").click(function(){ 
    $(".edit-comment").removeClass("active-edit"); 
    $(".comment-input").removeClass("active-edit"); 
    $(this).prev().children().addClass("active-edit"); 
    $(this).addClass("active-edit"); 
    $(this).prev().children().focus(); 
}); 

$(document).on("click", ".active-edit", function() { 
    console.log("edit"); 
}); 

Проблема с этим я получаю журнал консоли сразу на первый щелчок, и я не нужен, что, когда «редактирование-комментарий» щелкают он должен только addClass и removeClass, а затем во втором клике он должен «редактировать».

Я пробовал с javascript setTimeOut, обратные вызовы, но он не работал.

EDIT:

Разделяя некоторые HTML:

<tr class="alert-comment"> 
<td colspan="6"><input type="text" value="" class="comment-input" /></td> 
<td class="edit-comment" title="Click the text to edit"><span class="edit-comment-icon"></span></td> 
</tr> 

Answer 1

Вы могли бы хотеть, чтобы переместить вторую функцию щелчка внутри функции мыши, что требуется для запуска первой. т.е.:

$(".edit-comment").click(function(){ 
    $(".edit-comment").removeClass("active-edit"); 
    $(".comment-input").removeClass("active-edit"); 
    $(this).prev().children().addClass("active-edit"); 
    $(this).addClass("active-edit"); 
    $(this).prev().children().focus(); 

    $('.parent-container').on("click", ".active-edit", function() { 
     console.log("edit"); 
    }); 
}); 

Это, безусловно, не очень красивое решение. Если вы делитесь некоторыми html, кто-то может указать вам в лучшем направлении.