0

目标

$.ajax在jQuery 函数成功时调用脚本（更具体地说，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"
        }));
    });

提前致谢。

4

1 回答 1

1

如我所见，您应该简单地调用$(this).find("button.action").qtip() 或.qtip(...)设置/更新您想要的内容。这个演示可能是你的备忘单：http: //craigsworks.com/projects/qtip2/demos/#validation

于 2013-07-01T18:45:11.007 回答