javascript - jQuery Click 事件未附加到 Knockout 模板

Question

我有一个附加到 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>

选中该项目后，即可对其进行编辑。这是事件监听器:

        $('.rename').click(function () {
            $('.selected .rename').fadeIn(80);
            $(this).fadeOut(80);
            $(this).parent().addClass('selected');
        });

还有另一个事件监听页面上其他任何地方的点击以取消选择正在编辑的项目:

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

当它被点击时，它应该被选中以允许编辑。当我将代码从 profile 移动到一个 knockout 模板时，它不再监听点击事件。当我检查 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>

有人可以向我解释为什么事件监听器不再对动态添加的元素起作用吗？我也想帮助解决这个问题。谢谢!

Answer 1

您必须在始终可见的外部元素上添加点击事件监听器(因为它不适用于隐藏元素)。然后为模板代码添加其他选择器(隐藏)

示例代码为:

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