如何在$ .ajax成功時調用腳本

Question

目標

成功從jQuery $.ajax函數時，調用一個腳本（更具體地說是qTip2腳本）。

問題

我有以下腳本可用於KnockoutJS：

$.ajax({
    url: "/ProductsSummary/List?output=json",
    dataType: "json",
    success: function (data) {
        var mappingOptions = {
            create: function (options) {
                return (new (function () {
                    this.finalMeasure = ko.computed(function () {
                        return this.quantity() > 1 ? this.measure() + "s"
                        : this.measure();
                    }, this);

                    this.infoComposition = ko.computed(function () {
                        return this.quantity() + ' ' + this.finalMeasure();
                    }, this);

                    ko.mapping.fromJS(options.data, {}, this);
                })());
            }
        };

        ViewModel.Summary.products = ko.mapping.fromJS(data, mappingOptions);
        ko.applyBindings(ViewModel);

        $("ul.products-list li").each(function () {
            var $productId = $(this).data("productid"),
                $match = $(".summary")
                         .find("li[data-productid=" + $productId + "]")
                             .length > 0;

            if ($match) {
                $(this).find("button.action").addClass("remove");
            } else {
                $(this).find("button.action").addClass("add");
            }
        });
    }
});

在下面的片段中，我將一個類設置為一個按鈕來定義其樣式，但是我沒有成功，因為我需要再次調用qTip2來呈現新的工具提示。 看到：

$("ul.products-list li").each(function () {
    var $productId = $(this).data("productid"),
        $match = $(".summary")
                 .find("li[data-productid=" + $productId + "]")
                     .length > 0;

    if ($match) {
        $(this).find("button.action").addClass("remove");
    } else {
        $(this).find("button.action").addClass("add");
    }
});

為了使一切正常，我必須在此片段之后調用qTip2腳本，但先前已調用它。

為了避免多余或實踐DRY概念 ，如何在“成功時”內部再次調用qTip2腳本？

一點代碼

我的qTip2腳本：

$(function () {
        var targets = $("ul.products-list li .controls
                      button.action.add").attr('oldtitle', function () {
            var title = $(this).attr('title');
            return $(this).removeAttr('title'), title;
        }),

            shared_config = {
                content: {
                    text: function (event, api) {
                        return $(event.currentTarget).attr('oldtitle');
                    }
                },
                position: {
                    viewport: $(window),
                    my: "bottom center",
                    at: "top center",
                    target: "event"
                },
                show: {
                    target: targets
                },
                hide: {
                    target: targets
                },
                style: "qtip-vincae qtip-vincae-green"
            };

        $('<div/>').qtip(shared_config);

        $('<div/>').qtip($.extend(true, shared_config, {
            content: {
                text: function (event, api) {
                    var target = $(event.currentTarget),
                        content = target.data("tooltipcontent");

                    if (!content) {
                        content = target.next("div:hidden");
                        content && target.data("tooltipcontent", content);
                    }

                    return content || false;
                }
            },
            position: {
                my: "top center",
                at: "bottom center",
                viewport: $(".content"),
                container: $(".content")
            },
            show: {
                event: "click",
                effect: function () {
                    $(this).show(0, function () {
                        $(this).find("input[name=productQuantity]").focus();
                    });
                }
            },
            hide: {
                event: "click unfocus",
                fixed: false
            },
            events: {
                hide: function (event, api) {
                    $($(this).find("input[type=text].quantity")).val("");
                    $($(this).find("button")).prop("disabled", true);
                }
            },
            style: "qtip-vincae qtip-vincae-grey"
        }));
    });

提前致謝。

Answer 1

如我所見，您應該簡單地調用$(this).find("button.action").qtip()或.qtip(...)並設置/更新所需的內容。 該演示可以作為您的備忘單： http : //craigsworks.com/projects/qtip2/demos/#validation