保留动态更改元素的事件

Question

目标

事情发生后回忆功能的一种好的,明确的方式.

问题

我正在处理一些必须在发生事件时被召回的功能.一个简单的例子是像Twitter的跟随按钮这样的按钮.

直到这里,一切都好.但是,我不知道如何回忆.实际上,我已经尝试过使用$.getScriptjQuery,但它会给服务器带来很多请求,我对这种行为感到不舒服.

为了说明这个问题,我做了这个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");
});

工作演示