javascript - 保留动态变化元素的事件

Question

目标

在某事发生后记忆功能的一种好而明确的方法。

问题

我正在处理一些在发生某些事情时必须重新调用的函数。一个简单的例子是像 Twitter 的关注按钮这样的按钮。

到此为止，一切都很好。但是，我不知道如何记忆。实际上，我已经尝试使用 jQuery 的 $.getScript，但它会导致对服务器的许多请求，我对这种行为感到不舒服。

为了说明问题，我制作了this jsFiddle .当您第一次悬停按钮时，它的样式会发生变化。当您点击它并再次点击时，“悬停行为”消失。

我真的不知道如何进行。

$.getScript 这是最好的解决方案吗？

有人有什么建议吗？

代码(如果jsFiddle下来)

代码中的 Knockout 只是一个示例，与此无关。我想通过 ajax 调用和一切可能的方式来做到这一点。

HTML:

<div class="container">
    <!-- ko if: isAdded -->
    <button class="btn primary" data-bind="click: add">Add Xbox 360</button>
    <!-- /ko -->

    <!-- ko ifnot: isAdded -->
    <button class="btn btn-success primary remove" data-bind="click: remove">Xbox 360 already added</button>
    <!-- /ko -->
</div>

JavaScript:

$("button.remove").hover(function() {
    $(this)
    .removeClass("btn-success")
    .addClass("btn-danger")
    .text("Click here to remove");
}, function() {
    $(this)
    .removeClass("btn-danger")
    .addClass("btn-success")
    .text("Xbox 360 already added");
});

ViewModel = function() {
    var self = this;

    self.isAdded = ko.observable(false);

    self.add = function(item) {
        item.isAdded(false);
    };

    self.remove = function(item) {
        item.isAdded(true);
    };
};

ko.applyBindings(new ViewModel());

Answer 1

您将需要使用委托(delegate)事件，当您在页面上添加/删除/修改元素时，这些事件将保持绑定(bind)状态。请参阅 jQuery 的文档 on()有关事件委托(delegate)的更多信息的函数。

请注意，这意味着您需要使用 mouseenter 和 mouseleave 事件而不是 hover() 便捷方法(这只是为 mouseenter 和 mouseleave 附加监听器的包装器)

$(document).on('mouseenter', "button.remove", function() {
    $(this)
    .removeClass("btn-success")
    .addClass("btn-danger")
    .text("Click here to remove");
}).on('mouseleave', 'button.remove', function() {
    $(this)
    .removeClass("btn-danger")
    .addClass("btn-success")
    .text("Xbox 360 already added");
});

Working Demo