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

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

请注意，这意味着您需要使用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

Answer 2

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

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

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

详细了解事件委派here。

Answer 3

您可以使用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");
});

FIDDLE

保留动态更改元素的事件

目标

问题

代码（如果jsFiddle向下）

3 个答案: