javascript - jQuery 插件错误

Question

我正在使用 jquery 1.9.1，我正在尝试开发一个插件。问题是该插件无法工作。代码如下:

    ;(function($) {

    $.fn.single = function() {

        return this.each(function(){

            // Get the instance
            var element = $(this);

            // Resize the "data-target" divs
            element.load(function(){
                changeCSS(element);
            });

            // Bind the method to the resize window event
            $(window).bind("resize", function(){  
                changeCSS(element);  
            });

        });

    };

    // function to resize all the "data-target" divs
    function changeCSS(element) {

        // Grab the screen resolution
        var windowWidth     = $(window).width();
        var windowHeight    = $(window).height();
        // Count how many targets the div has
        var targetsSize     = $("[data-target]").size();

        // Resize the parent div
        $(element).css({
            "width" : windowWidth,
            "height": windowHeight * targetsSize
        });

        // Resize all the targets div
        $(element + "> div[data-target]").each(function(){
            $(this).css({
                "width" : windowWidth,
                "height": windowHeight
            });
        });

    }

})(jQuery);

我在文档中这样调用它:

<script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/single-0.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#single").single();
        });
    </script>

控制台没有问题。我做错了什么？

Answer 1

我假设这是因为您滥用了方法.load。如果您查看 jQuery 文档，您会发现它的用途是:

.load() : Load data from the server and place the returned HTML into the matched element.

http://api.jquery.com/load/

删除行element.load(function ...，只需调用您的changeCSS函数，您已经在Document.Ready上加载此扩展

    return this.each(function () {
        // ...

        changeCSS(element); // <-- just run the function right away

        // ... etc
    });