Javascript 通过单击由把手插入的锚元素来触发事件

好吧，假设我在下面的锚元素中附加了把手。 我想在点击后触发一个事件。但是，在我插入它之后，javascript事件对它不起作用。我的意思是：

<div class="list-group" id="listGroup">
    <a class="list-group-item" href="#" name="jumanji">JUMANJI</a>
    <a class="list-group-item active" href="#" name="looper">LOOPER</a>
    <a class="list-group-item" href="#" name="lone_survivor">LONE SURVIVOR</a>
    <a class="list-group-item" href="#" name="the_dark_knight">THE DARK KNIGHT</a>
    <a class="list-group-item" href="#" name="world_war_z">WORLD WAR Z</a>
    <script id="list" type="text/x-handlebars-template">
        {{#fill this}}
        <a class="list-group-item" id="joe" href="#">{{name}}</a>
        {{/fill}}
        </script>
</div>

但是就像joe不存在一样，但是，我可以通过点击其他东西并从那里引用它来联系joe。假设还有一个id为“moe”的元素，那么我可以这样做

$('#moe').click(function () { alert($('#joe').html()); }

---

希望我说清楚，谢谢。

使用功能尝试活动委派：

$(document).on('click','#joe',function () { alert ("hi"); }

---

谢谢你，document.on会重新呈现文档吗？还有一个问题，为什么我的应用程序需要深度链接和状态，它与我提出的问题有关系吗？实际上是$（document）.on（）侦听动态添加的元素的事件，而您所说的click（）函数在启动时被呈现，因此找不到匹配的元素。因此，对于动态添加的元素，您必须始终委派事件。关于您的问题，我不理解您所说的“深度链接和状态”是什么意思？

$(document).on('click','#joe',function () { alert ("hi"); }