variable in jQuery plugin

Question

i'm writing a jQuery plugin and i met the following strange things:

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

i define the instance here and quote it in this function(still in the plugin namespace) and it should be accessed isn't it?

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

the problem is that the $checkbox is not null ,but the length of the collection is 0. however when i put the definition in the click function like this:

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

i console.log the $checkbox.length ,and it shows that there are two elements. in addition,if i define a local function in the plugin namespace like this, the $checkbox is said to be undefined.

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

i wanna know where is the problem is.

Buzinas · Accepted Answer · 2015-09-25 02:32:06Z

1

This is happening because you're setting the variable in the begining, when there are no items yet.

Then, probably, you're dynamically adding items, but the variable is not updated automatically, since it's only an array with a reference to the elements found when the function was executed.

Each time you'll need to use the selector again, to get all the DOM changes that were made.

answered Sep 25, 2015 at 2:32

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lizlalala Over a year ago

u'r right!but each time i have to update it manually just like define a new variable and use the selector? is there any other solutions?

Buzinas Over a year ago

You can use the same variable if you want, but you need to update it each time, there is no workaround to this. You can read about Mutation Observers, but it's too much work for something like that.

Buzinas Over a year ago

@lizlalala Btw, if my answer was useful to you, please click on the arrow to upvote it, and - if possible - click on the V to mark it as the accepted one.

dave.mcalpine · Accepted Answer · 2015-09-25 02:32:13Z

0

im guessing the plugin is getting initialized before the html has rendered, that's why it works on click, by that time the html has already been evaluated.

do you wrap you pluin in an jquery doc ready?

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

answered Sep 25, 2015 at 2:32

dave.mcalpine

4072 silver badges7 bronze badges

Collectives™ on Stack Overflow

variable in jQuery plugin

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related