1

我正在开发一个使用淘汰赛和 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，但是，我认为它有点太复杂了。

有人有想法吗？

4

2 回答 2

1

嗯....我现在感觉很笨。我并没有完全破坏对话。

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

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

于 2013-01-05T06:00:29.753 回答
0

将事件绑定到由淘汰赛创建的事物时，您应该使用 .live 而不是 .bind 来获取新创建的 DOM 元素

于 2013-01-05T16:52:24.500 回答