Question

我正在开发一个使用knockout和MVC4的项目。我有一些代码生成一个动态jquery对话框，该对话框用挖空数据填充自己：

$("#manage-pros").click(function () {
$("<div>")
    .attr("data-bind", "template: { name: 'pro-template' }")
    .dialog({
        resizable: false,
        modal: true,
        title: "Manage Pros",
        width: 700,
        buttons: [
            {
                text: "Save Changes",
                'data-bind': 'click: saveChanges',
                click: function () { }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ],
        close: function () {
            $(this).dialog("close");
            ko.cleanNode($(this));
        },
        open: function () {
            ko.applyBindings(new ProViewModel());
            $("input[type=button]").button();
        }
    });
});

Pro模板如下所示：

    <div class="modal-form" id="pro-template">
        <div class="form-element">
            <label>Add New Pro</label>
            <input data-bind="value: newProText" class="textbox ui-widget-content ui-corner-all" />
            <input type="button" data-bind="click: addPro" value="Add Pro" />
        </div>
        <table style="border-collapse: collapse;" class="ui-widget ui-corner-all">
            <tr class="ui-widget-header ui-dialog-header" style="">
                <td style="width: 75px; padding: 5px;">Modified</td>
                <td style="width: 425px; padding: 5px;">Pro Name</td>
                <td style="width: 100px; padding: 5px;"></td>
            </tr>
            <tbody data-bind="foreach: pros">
                <tr>
                    <td style="text-align: center;">
                        <span data-bind="fadeVisible: name.hasChanged()"><span class="ui-icon ui-icon-check left-icon"></span></span>
                    </td>
                    <td>
                        <input data-bind="value: name, visible: editingText(), hasfocus: editingText" class="textbox ui-widget-content ui-corner-all" />
                        <span data-bind="text: name, visible: !editingText(), click: textClick"></span>
                    </td>


                    <td>
                        <a href="#" data-bind="click: $parent.removePro">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

我发现在第一次将动态内容添加到DOM时，一切都很有效，但是，如果我按下转义或关闭对话框，我的“点击编辑”功能将无效。我试图把它变成一个jsfiddle，但是，我觉得它有点过于复杂。

有没有人有任何想法？

Answer 1

好吧......我现在感到愚蠢。我没有完全破坏对话。

$(this).dialog('destroy').remove();

将上述行添加到对话框和繁荣的关闭处理程序中，效果很好！

Answer 2

当将事件绑定到由knockout创建的事物时，你应该使用.live而不是.bind来拾取新创建的DOM元素

敲除绑定不适用于第二代动态内容

2 个答案: