Jquery 对话框中的敲除单击绑定答案

【问题标题】：Knockout Click Bindings in Jquery DialogJquery 对话框中的敲除单击绑定
【发布时间】：2013-07-20 04:50:55
【问题描述】：

我在页面上使用了一个 knockout.js 视图模型，除了我设置为 jquery 对话框的 div 中的点击绑定之外，一切都正常工作

这里是 div

<div id="CancelModal" title="Cancel">
    Changes to the definition have been detected. Do you want to exit and discard    the changes?"   
    <div style="position: absolute; bottom: 8px; right: 8px; text-align: right">
        <input type="button" value="Yes" data-bind="click: cancelConfirm" />
        <input type="button" value="No" data-bind="click: cancelDeny" />
    </div>
</div>

然后是我的 jquery

$("#CancelModal").dialog({
    modal: true,
    autoOpen: false,
    width: 400,
    minHeight: 150,
    maxHeight: 150,
    position: "center",
    resizable: false
});

然后在我的视图模型中

...

cancelConfirm() {
    alert("confirm");
}

cancelDeny() {
    alert("deny");
}

绑定已设置，但它们再次仅不适用于此对话框中的元素。如果我删除 jquery 对话框代码，它就可以工作。有什么想法我需要在这里做什么？

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

试试这个http://jsfiddle.net/76EEt/1/

HTML

<a href="#" data-bind="click: $root.openDialog"> Open dialog </a> 
<div id="CancelModal" title="Cancel">
    Changes to the definition have been detected. Do you want to exit and discard    the changes?"   
    <div style="position: absolute; bottom: 8px; right: 8px; text-align: right">
        <input type="button" value="Yes" data-bind="click: cancelConfirm" />
        <input type="button" value="No" data-bind="click: cancelDeny" />
    </div>
</div>

$("#CancelModal").dialog({
    modal: true,
    autoOpen: false,
    width: 400,
    minHeight: 150,
    maxHeight: 150,
    position: "center",
    resizable: false
});

var DataViewModel = function() {
    var self = this;

    self.cancelConfirm = function () {
         alert("confirm");
    };

    self.cancelDeny = function () {
         alert("deny");
    };

    self.openDialog = function () {
        $("#CancelModal").dialog("open");
    };
};

ko.applyBindings(new DataViewModel());

【讨论】：

【解决方案2】：

你需要把它改成一个函数

self.cancelConfirm = function() {
    alert("confirm");
}

or 

this.cancelConfirm = function() {
    alert("confirm");
}

【讨论】：