如何在 Jquery 对象存在之前声明它？答案

【问题标题】：How can declare a Jquery Object before it exists?如何在 Jquery 对象存在之前声明它？
【发布时间】：2015-10-09 13:02:17
【问题描述】：

我想知道如何在 Jquery 对象存在之前声明它。

我解释我的问题：

我正在使用 jQuery 构建一个应用程序，并按照此处的 jQuery 文档中的说明组织我的代码：https://learn.jquery.com/code-organization/concepts/

我写过类似这样的代码：

var foo = {
   init : function(){
       foo.config = {
           element : $('.myDiv')
       }
   }
};

var bar = {
    fooBar : function(){
        $(someData).each(function(){
            $('.anotherDiv').append("<div class='myDiv'></div>");
        });

        foo.config.element.click(function(){
            alert('It doesn\'t works for me');
        });
    }
}

$(function(){
    foo.init();
    bar.fooBar();
});

因此，当我单击 div 时，不会显示警报。我知道 delegate() 或 on() 方法的存在，但它也不起作用。

我认为这是因为页面加载时对象还不存在。

我的假设可行吗？

【问题讨论】：

on() 是解决方案，我们无法解释为什么它对您不起作用，因为您没有向我们展示您使用它的尝试。

标签： javascript jquery

【解决方案1】：

如果它还不存在，您需要使用.on - 按照上面的设计并假设页面加载时存在一些容器：

foo.config = {
    //element : $('.myDiv'),
    element: ".myDiv",
    container: $("body")
}

处理程序：

foo.config.container.on("click", foo.config.element, function(){

});

【讨论】：

元素必须是字符串
@Quentin Check this 在处理程序中，它是容器，因此意味着不使用选择器参数（而是用作数据处理程序）。您仍然可以过滤事件目标，但这不是重点（抱歉，不知道如何更新 jsbin）
@Quentin try alert(this.tagName)//BODY ...点击外部也可能是因为body没有超出元素的高度
@Quentin See jsFiddle（jsbin 让我恶心...）jsfiddle.net/65n0ah11 点击按钮。 jq on() 方法的 DOC 是明确的，如果第二个参数不是字符串，则将其用作数据处理程序。编辑：医生说：data Type: Anything 我猜什么都不是函数
@Quentin 身体高度默认不是视口高度

【解决方案2】：

您需要搜索 DOM 元素，而不是在 foo.init(); 执行时，而是在您需要该元素时 - 分配其 click 处理程序。

将element改成函数：

var foo = {
   init : function(){
       foo.config = {
           element : function() { return $('.myDiv'); } 
       }
   }
};

var bar = {
    fooBar : function(){
        $(someData).each(function(){
            $('.anotherDiv').append("<div class='myDiv'></div>");
        });

        foo.config.element().click(function(){
            alert('It doesn\'t works for me');
        });
    }
}

【讨论】：

很好，这就像一个魅力，但你能解释一下为什么吗？
@JohnnyBeGoody - 因为$('.myDiv') 不是在您调用foo.init(); 时搜索DOM 元素，而是在您调用foo.config.element() 时搜索DOM 元素。

【解决方案3】：

您创建的直接

var foo = {
   init : function(){
       foo.config = {

暂时直接选择项目（尚未创建）

           element : $('.myDiv')
       }
   }
};

var bar = {
    fooBar : function(){
        $(someData).each(function(){
            $('.anotherDiv').append("<div class='myDiv'></div>");
        });

您为空组绑定处理程序

        foo.config.element.click(function(){
            alert('It doesn\'t works for me');
        });
    }
}

您可以像这样使用间接事件处理：

    var foo = {
        init: function() {

在文档上创建了间接点击监听器。一个人将处理来自每个 .myDiv 的所有传播的点击事件，甚至是将来创建的。

         $(document).on('click', '.myDiv', function() {
                    alert('This mast work on any created div with class "myDiv"');
                });
                foo.config = {
                    elementSelector: '.myDiv'
                }
            }
        };
    var bar = {
        fooBar : function(){
            $(someData).each(function(){
                $('.anotherDiv').append("<div class='myDiv'></div>");
            });
        }
    }

【讨论】：