4

目標

何かが起こった後に関数を思い出すための良い、決定的な方法です。

問題

何かが起こったときにリコールする必要があるいくつかの機能を使用しています。簡単な例は、Twitter の次のボタンのようなボタンです。

ここまで、すべて順調です。でも、どうやって思い出せばいいのかわからない。実際、私はすでに$.getScriptjQueryを使用しようとしましたが、サーバーに多くのリクエストが発生し、この動作に慣れていません.

問題を説明するために、この jsFiddleを作成しました。ボタンを初めてホバーすると、スタイルが変わります。それをクリックしてもう一度クリックすると、「ホバー動作」が消えます。

どうすればいいのか本当にわかりません。

$.getScriptそれはこれに対する最良の解決策ですか？

誰か提案がありますか？

コード (jsFiddle ダウンの場合)

コードのノックアウトは単なる例であり、無関係です。私は 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()関数のドキュメントを参照してください。

mouseenterこれは、コンビニエンス メソッドの代わりにandmouseleaveイベントを使用する必要があることを意味することに注意してください(これは、 andhover()のリスナーをアタッチするための単なるラッパーです) 。mouseentermouseleave

$(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 に答える