Срабатывает click со второго раза

[Gofol]

Есть html-код:

<div class="panel-heading" data-project_id="1">
                <span class="calendar glyphicon glyphicon-calendar"></span>
	For Home
<div class="pull-right action-buttons">
  <a class="pencil" data-method="get" data-remote="true" href="/projects/1/edit" id="project_1">
		<span class="glyphicon glyphicon-pencil"></span>
</a>  <a href="#" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
</div>
            </div>

Для обработки события click написал такой код, но он срабатывает со второго раза, в чем проблема?

$('.panel-heading').each(function(){

	$(this).on("click", ".pencil", function(){
	
	console.log("Клик!");
});

});

Шапок '.panel-heading' может быть несколько на странице.

[рони]

Gofol,

event.preventDefault()

Отменяет выполнение события. Например, при "клике" по ссылке, переход по ней не произойдет

[Gofol]

в том то дело, что у меня не происходит переход. У меня при клике отсылается ajax-запрос для того, что бы вернул форму для редактирования, но срабатывает со второго раза клик.

[рони]

ajax-запрос

ой ... может быть у вас тоже что у всех новичков ... асинхронность?

[Gofol]

что имели Вы в виду? Задание такое чтобы приложение было одностраничным. Проблему не решил, но она связана с ROR фреймворком (серверная часть).

[рони]

Gofol,
чтоб ответ с сервера пришёл нужно время.