javascript - 悬停卡未显示在带有绑定(bind)的 knockout JS中

我得到了这张悬停卡，想在子菜单中显示它。它可以在标头中使用，但是在子菜单“ with：$ root.chosenMenu”-绑定中时，悬停效果不会起作用。

这是我的代码：

HTML：

<div>
    <span class="previewCard">
        <label class="hovercardName" data-bind="text: displayName"></label>
        <span class="hovercardDetails">
            <span data-bind="text: miniBio"></span>.<br/>
            <a data-bind="attr: { href: webpage, title: webpage }, text: webpage">My blog</a>
        </span>
    </span>
    <br/><br/>
    <div class="wysClear wysLeft buttonRow">
        <a href="#pid1" data-bind="click: function(){$root.chosenMenu('a');return false;}">Panel A</a>
        <a href="#pid2" data-bind="click: function(){$root.chosenMenu('b');return false;}">Panel B</a>
    </div>
</div>
<hr/>
<div data-bind="with: $root.chosenMenu">
    <div id="pid1" data-bind="visible: $root.chosenMenu() === 'a'">
        panel A: <br/><br/>
        <span class="previewCard">
            <label class="hovercardName" data-bind="text: $root.displayName"></label>
            <span class="hovercardDetails">
                <span data-bind="text: $root.miniBio"></span>.<br/>
                <a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage">My blog</a>
            </span>
        </span>
    </div>
    <div id="pid2" data-bind="visible: $root.chosenMenu() === 'b'">
        panel B: <br/><br/>
        <span class="previewCard">
            <label class="hovercardName" data-bind="text: $root.displayName"></label>
            <span class="hovercardDetails">
                <span data-bind="text: $root.miniBio"></span>.<br/>
                <a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage">My blog</a>
            </span>
        </span>
    </div>
</div>

Javascript：

viewModel = function(){
    var self = this;

    self.chosenMenu = ko.observable();
    self.displayName = ko.observable("Asle G");
    self.miniBio = ko.observable("Everywhere we go - there you are!");
    self.webpage = ko.observable("http://blog.a-changing.com")
};

ko.applyBindings( new viewModel() );

// hovercard
$(".previewCard").hover(function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}, function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

CSS：

.previewCard {
    position:relative;
}
.hovercardName {
    font-weight:bold;
    position:relative;
    z-index:100; /*greater than details, to still appear in card*/
}
.hovercardDetails {
    background:#fff ;
    border:solid 1px #ddd;
    position:absolute ;
    width:300px;
    left:-10px;
    top:-10px;
    z-index:50; /*less than name*/
    padding:2em 10px 10px; /*leave enough padding on top for the name*/
    display:none;
}

小提琴：http://jsfiddle.net/AsleG/jb6b61oh/

最佳答案

您有一个经典的jQuery问题：事件处理程序仅附加到当时存在的元素上。

这会将hover（mouseenter / mouseleave）事件处理程序附加到唯一的.previewCard上：

$(".previewCard").hover(function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}, function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

但是，如果敲除可以动态地创建一些事件，则它们将没有任何事件处理程序。因此，您必须将事件处理委托给层次结构中较高的节点。

$(document).on("mouseenter", ".previewCard", function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeIn();
}).on("mouseleave", ".previewCard", function() {
    $(this).find(".hovercardDetails").stop(true, true).fadeOut();
});

这仍然不是解决问题的非常干净的方法。为什么不创建一个悬浮卡绑定处理程序并完全摆脱视图模型中的jQuery代码？

ko.bindingHandlers.hovercard = {
    init: function (element) {
        $(element).hover(function() {
            $(this).find(".hovercardDetails").stop(true, true).fadeIn();
        }, function() {
            $(this).find(".hovercardDetails").stop(true, true).fadeOut();
        });
    }
};

用作：

<span class="previewCard" data-bind="hovercard: true">

http://jsfiddle.net/jb6b61oh/6/

关于javascript - 悬停卡未显示在带有绑定(bind)的 knockout JS中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28928062/