jQuery Click事件未附加到Knockout模板

Question

I have a block of code that is attached to a jQuery click event. Here's the element:

<!-- 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>

When the item is selected, it becomes available for editing. Here's the event listener:

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

There's another event that listens for a click anywhere else on the page to deselect the item being edited:

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

When it is clicked on, it should be selected to allow for editing. When I move the code from the profile into a knockout template, it doesn't listen to the click event anymore. When I inspect the Event Listeners in Chrome's tools, the listener is nowhere to be found. Here is what my template looks like:

            <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>

Can someone explain to me why the event listener no longer works on the dynamically added elements? I would also like help in solving this problem. Thanks!

Answer 1

You have to add click event listener on the outer element which is always visible (since it doesn't work on hidden elements). And then add other selector for template code (which is hidden)

Sample code would be:

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

Answer 2

如果您希望处理程序上，将在您应该使用以后被创建工作内容on ： http://api.jquery.com/on/