在jQuery中动态更改内容时要使用哪个Click事件处理程序？

Question

我在jQuery中有一个小应用程序，它使用锚元素的href值并将其插入为div的ID。 div是一个基本的弹出窗口，仅在触发时才可见。

如果使用与弹出div的id相同的href值点击锚标签，则会触发弹出窗口。

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，第二个打开了，并带有设置值。

我还尝试过使用另一种类型的点击事件，并且该事件可用于首次点击。 该活动一直在进行：

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

我的问题是我不能使用这种类型的事件处理程序，因为我将使用jQuery动态更改anchor href的内容。

---

题：

如何使原始代码按我期望的那样工作，因此客户端应只单击一次锚标记即可获得弹出窗口？ 我还有什么需要考虑的吗？

Answer 1

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

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