jQuery Click事件未附加到Knockout模板

时间:2013-11-25 21:34:22

标签: javascript jquery knockout.js

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

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

2 个答案:

答案 0 :(得分:2)

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

示例代码为:

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

答案 1 :(得分:1)

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