链接在 jQuery 插件上不起作用

Question

我正在编写一个插件来从我的公司内部 API 中提取列表，并且一切正常，但由于某种原因它不允许我链接其他方法。

(function( $ ) {

    $.fn.addListings = function(options){
        var defaults = {
            listingCount: 25,
            pageNumber: 1,
            customTemp: "<div class='listing'>\
            <img src='${IDXPhotoRef}'/>\
            <div class='address'>${Address}</div>\
            <div class='beds'> Beds: ${BedRooms}</div>\
            <div class='baths'>Baths: ${BathRooms}</div>\
            <div class='price'>Price: $${PriceFormatted}</div>\
            </div>",
            after: function(){}
        }

        var settings = $.extend({}, defaults, options );

        $.ajax({
          type: 'GET',
          // url: '/api/listings/?featuredlistings=1&pagesize=' + settings.listingCount + '&pagenumber=' + settings.pageNumber + '',
          url:'data.json',
          contentType: 'text/plain',
          crossDomain: true,
          context: $(this)
          })
        .done(function(data) {
            $.template("customTemp", settings.customTemp);
            var arrData = $.map(data[0], function(el) { return el; });
            for(i=0; i<arrData.length; i++){
                $.tmpl("customTemp", arrData[i]).appendTo(this);
            }

          })
        .always(function(){
            settings.after();
          });

    };

    return this;

    }( jQuery ));

https://github.com/cjthedizzy/jquery.addListingsJS/blob/master/jquery.addListings.js

Answer 1

return this 需要放在$.fn.addListings 块内：

(function($) {
    $.fn.addListings = function(options){
        // var defaults = {
        // ... rest of the code...

        return this;
    };
}(jQuery));