Question

我想知道如何声明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（）方法的存在，但它既不起作用。

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

我的假设是否可行？

Answer 1

如果它还不存在，则需要使用.on - 按照上面的设计进行操作，前提是页面加载时有一些容器：

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

处理程序：

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

});

Answer 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');
        });
    }
}

Answer 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>");
            });
        }
    }

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

3 个答案: