Question

我正在尝试在jquery插件中处理可链接性，它适用于jquery click below，

$(document).ready(function(){


        $('.call-parent').parent_child({
            target: '.element'
        });

        $('.call-child-1').click(function(){
            $(this).parent_child().child_1();
            return false;
        });

        $('.call-child-2').click(function(){
            $(this).parent_child().child_2();
            return false;
        });

    });

(function($) {

        $.fn.extend({ 

            parent_child: function(options) {

                var defaults = {
                    target:''
                }

                var options = $.extend(defaults, options);
                var o = options;

                var $this = this;

                var $cm = this.click(function(ei) {


                    alert('parent');
                    $this.child_1();

                    return false;

                });


                $this.child_1 = function() {

                    alert('child 1');

                };


                $this.child_2 = function() {

                    alert('child 2');

                };

                return $cm;

            }
        })
    })(jQuery);

但是当我在插件中使用each或ready时出现错误，例如，

$(document).ready(function(){


        $('.call-parent').parent_child({
            target: '.element'
        });

        $('.call-child-1').click(function(){
            $(this).parent_child().child_1();
            return false;
        });

        $('.call-child-2').click(function(){
            $(this).parent_child().child_2();
            return false;
        });

    });

(function($) {

        $.fn.extend({ 

            parent_child: function(options) {

                var defaults = {
                    target:''
                }

                var options = $.extend(defaults, options);
                var o = options;

                var $this = this;

                var $cm = this.each(function(ei) {


                    alert('parent');
                    $this.child_1();

                    return false;

                });


                $this.child_1 = function() {

                    alert('child 1');

                };


                $this.child_2 = function() {

                    alert('child 2');

                };

                return $cm;

            }
        })
    })(jQuery);

错误消息，

$ this.child_1不是函数[Break On This Error]

为什么我不能使用each或ready执行此操作？或者我做错了吗？

Answer 1

我正在重述我的评论作为答案，所以你可以接受：

像var f = function() { ... }这样的函数表达式不会像命名函数声明function f() { ... }那样被提升。因此，在each示例中，设置$cm在声明之前调用$this.child_1。在第一个示例中，函数在单击时被调用，因此它在执行时已经被解析。

Answer 2

请勿在插件上使用$。它与jQuery对它的使用相冲突。使用其他东西，或许a。

jquery插件的可链接性与每个和准备好

2 个答案: