4

目标

发生某事后回忆功能的一种很好且明确的方法。

问题

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

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

为了说明这个问题，我做了这个 jsFiddle。当您第一次悬停按钮时，其样式会发生变化。当您单击它并再次单击时，“悬停行为”就会消失。

我真的不知道如何进行。

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

有人有什么建议吗？

代码（如果 jsFiddle down）

代码上的 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());
4

3 回答 3

5

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

请注意，这意味着您将需要使用mouseenterandmouseleave事件而不是hover()便捷方法（它只是为mouseenterand附加侦听器的包装器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");
});

工作演示

于 2013-07-11T19:35:26.920 回答
2

您需要使用事件委托，以便处理程序绑定当前和未来的元素：

$('.container').on('mouseenter', 'button.remove', function() {
    ...
}).on('mouseleave', 'button.remove', function() {
    ...
});

http://jsfiddle.net/2KUp8/5/

在此处阅读有关事件委托的更多信息。

于 2013-07-11T19:36:44.750 回答
0

您可以使用on方法动态添加元素

$(document).on("mouseover", "button.remove", function(e) {
    $(this)
    .removeClass("btn-success")
    .addClass("btn-danger")
    .text("Click here to remove");
});

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

小提琴

于 2013-07-11T19:41:06.547 回答