Javascript jQuery单击事件未附加到淘汰模板

我有一个附加到jQuery单击事件的代码块。以下是要素：

<!-- Profiles -->
<div class="profiles">
    <h1>Profiles</h1>
    <div class="profile">
        <div class="name">
            <input type="text" maxlength="14" value="Default" />
            <span class="rename">q</span>
        </div>
        <div class="controls">
            <span class="edit">EDIT</span>
            <span class="duplicate">COPY</span>
            <span class="delete default">J</span>
            <div class="alert-box">
                <p>Are you sure you want to delete this profile?</p>
                <div>Y</div>
                <div>N</div>
            </div>
        </div>
        <div class="saved">
            <span class="cancel-button">Cancel</span><span class="save-button">Save</span>
        </div>
    </div>
</div>

还有另一个事件侦听页面上任何其他位置的单击以取消选择正在编辑的项目：

        $(document).click(function () {
            $(".selected .rename").fadeIn(80);
            $('.name').removeClass('selected');
        });

单击时，应选择它以允许编辑。当我将代码从

配置文件

移动到敲除模板中时，它不再侦听单击事件。当我检查Chrome工具中的事件监听器时，找不到监听器。以下是我的模板的外观：

            <div class="profiles">
                <h1>Profiles</h1>

                <div data-bind="template: { name: 'profilestempl', foreach: $root.profiles }"></div>
            </div>

        <script type="text/html" id="profilestempl">
            <div class="profile">
                <div class="name">
                    <input type="text" maxlength="14" data-bind="value: name" />
                    <span class="rename">q</span>
                </div>
                <div class="controls">
                    <span class="edit">EDIT</span>
                    <span class="duplicate">COPY</span>
                    <span class="delete">J</span>
                    <div class="alert-box">
                        <p>Are you sure you want to delete this profile?</p>
                        <div>N</div><div>Y</div>
                    </div>
                </div>
                <div class="saved">
                    <span class="cancel-button">Cancel</span><span class="save-button">Save</span>
                </div>
            </div>
        </script>

轮廓
Q
编辑
复制
J
是否确实要删除此配置文件

纽约
取消保存

---

有人能解释一下为什么事件监听器不再处理动态添加的元素吗？我也想帮助解决这个问题。谢谢

如果希望处理程序处理将来将创建的元素，则应在上使用

：
必须在始终可见的外部元素上添加click event listener（单击事件侦听器）（因为它不处理隐藏的元素）。然后为模板代码添加其他选择器（隐藏）

示例代码为：

function addClickEventToCloseButton(){
    $("#outerAlwaysVisible").on('click','#templateHiddenInitially',function(){
        alert('works')
    });
}

function addClickEventToCloseButton(){
    $("#outerAlwaysVisible").on('click','#templateHiddenInitially',function(){
        alert('works')
    });
}