Question

如何使用knockout.js在外部点击隐藏div ...我试过这个但是没有成功..

HTML：

<body>
<div data-bind="visible: show">
    <h3>hello world</h1>
</div>

<input type='button' data-bind="click: showBox" value="show"/>

    <body>

脚本：

var viewModel = function()
{
    self = this;
    self.show =  ko.observable(false);
    self.showBox = function(){
            self.show(true);
        $("body").one("click", function(){

                self.show(false);
        });
     };
}

ko.applyBindings(new viewModel());

Here is fiddler example:

Answer 1

由于您只想在用户点击div的任何位置时隐藏div，您必须将stopPropagation()添加到div的click事件，以及按钮的click事件，否则身体的click事件将立即触发，每次您尝试单击按钮时隐藏div。请注意，这将使得在显示div时单击按钮不会使div被隐藏...您还需要将$("body").on("click"...移动到showBox之外。

模特：

var viewModel = function()
{
    self = this;
    self.show =  ko.observable(false);
    self.showBox = function(){
            self.show(true);
     };
     $("body").on("click", function(){
         self.show(false);
     });
}

ko.applyBindings(new viewModel());

HTML：

<div data-bind="visible: show, click: function(data, event) { event.stopPropagation(); }">
    <h3>hello world</h1>
</div>

<input type='button' data-bind="click: function(data, event) { showBox(data); event.stopPropagation(); }" value="show"/>

工作fiddle

使用淘汰赛在外部点击隐藏div？

1 个答案: