Question

我正在编写一个jQuery插件，我遇到了以下奇怪的事情：

$.fn.todo = function(options)
{
    var $input = $("#main_body>input");
    var $checkbox = $("#item_lists input:checkbox");

我在这里定义实例并在此函数中引用它（仍然在插件命名空间中）并且应该访问它不是吗？

$("#checkAll input").click(function()
    {
        $checkbox.prop("checked",this.checked);
    });
 ...

问题是$ checkbox不为null，但集合的长度为0。但是当我把定义放在点击函数中时这样：

$("#checkAll input").click(function()
    {
        var $checkbox = $("#item_lists input:checkbox");
        $checkbox.prop("checked",this.checked);
    });

我console.log $ checkbox.length，它显示有两个元素。另外，如果我像这样在插件命名空间中定义一个本地函数，那么$ checkbox被认为是未定义的。

function dealWithCheckbox()
{
        var checked_num = $checkbox.filter(":checked").length;
}

我想知道问题出在哪里。

Answer 1

这种情况正在发生，因为当你还没有任何项目时，你会在开始时设置变量。

然后，您可能会动态添加项目，但变量不会自动更新，因为它只是一个数组，其中包含对执行该函数时找到的元素的引用。

每次您需要再次使用选择器时，才能获得所有DOM更改。

Answer 2

我猜测插件在html呈现之前已经初始化了，这就是为什么它在点击上有效，到那时html已经被评估了。

你准备好了jquery doc吗？

$(function(){
  ... my plugin code ...
})

jQuery插件中的变量

2 个答案: