Question

我有一个附加到jQuery click事件的代码块。这是元素：

<!-- 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移动到敲除模板时，它不再听取click事件。当我检查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')
    });
}

Answer 2

如果您希望处理程序处理将来创建的元素，您应该使用on：http://api.jquery.com/on/

jQuery Click事件未附加到Knockout模板

2 个答案: