Какой обработчик события Click использовать при динамическом изменении содержимого в jQuery?

У меня есть небольшое приложение в jQuery, которое принимает значение href элемента привязки и вставляет его как идентификатор div. Div - это основное всплывающее окно, которое отображается только в том случае, если оно срабатывает.

Всплывающее окно запускается, если тег привязки получает щелчок с тем же значением href что и id всплывающего div.

Код HTML:

<a href="#i1" id="item1">Item 1</a>
<a href="#i2" id="item2">Item 2</a>
<a href="#i3" id="item3">Item 3</a>

<div class="popup"></div>

Код jQuery:

var items = ["#item1", "#item2", "#item3"];

$.each(items, function()
{
    $(document).on("click", this, function(e)
    {
        e.preventDefault();
        var href   = $(this).attr("href");
        var length = href.length;
        var anchor = href.substring(1, length);
        var popup  = $(".popup").attr("id", anchor);
    });
});

Проблема:

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

Я также попытался использовать другой тип события click, и он работал для первого щелчка. Мероприятие, которое работало, было:

$(this).on("click", function(e)
{
    // Stuff goes here as above
});

Моя проблема в том, что я не могу использовать этот тип обработчика событий, потому что я буду динамически изменять содержание href привязки с помощью jQuery.

Вопрос:

Как можно заставить исходный код работать так, как я ожидаю, поэтому клиент должен только щелкнуть один раз на тег привязки, чтобы получить всплывающее окно? Что-нибудь еще я должен рассмотреть?