Контент, сгенерированный Ajax, требует двойного щелчка, чтобы вызвать jQuery

На мой взгляд (сгенерированный ajax):

<a data-name="notes" href="#" data-type="text" data-pk="{!! $v->id !!}" class="vpUpdate">{{ $v->notes}}</a>

На моем jQuery:

$(document).on('click', '.vpUpdate', function (e) {
$.fn.editable.defaults.mode = 'popup';
$('.vpUpdate').editable({
type: 'text',
url:'edit-notes',
title: 'Edit Notes',
placement: 'top',
send:'always',
ajaxOptions: {
dataType: 'json'
}
});
});

Теперь это работает все, но только если я щелкну по нему дважды, тогда сработает jQuery.

У меня не было этой проблемы раньше с использованием только:

$(document).ready(function(){

Однако этот метод не будет работать, если содержимое было сгенерировано ajax.

Кроме того, допустим, у меня есть несколько ссылок на странице, которая использует один и тот же класс .vpUpdate в качестве триггера. Если я дважды щелкну один из них один раз, любые будущие клики с этого момента потребуют только один клик. Если я обновлю страницу, весь этот цикл повторяется снова.

Теперь мне просто интересно, как заставить его запускать jQuery сразу по первому щелчку вместо двойного щелчка.

Благодарю.