Using the Live method to bind a function to dynamically created checkboxes

Question

How do I bind the following to all future instances of checkboxes that might be added to my page dynamically. I'm not sure how to use the Live() method to do this.

        $('input:checkbox').imageTickBox({
            tickedImage: "/Content/Img/checkbox_tick.png",
            unTickedImage: "/Content/Img/checkbox_notick.png",
            imageClass: "tickbox"
        });

score 2 · Answer 1 · answered May 05 '11 at 14:15

2

You cannot do this with .live() (or .delegate()). Those are for binding event handlers for events which may not yet exist.

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

The image tick box plugin you're using is not any sort of "event." You will have to explicitly call the initialization code (e.g. $('selector').imageTickBox(...)) whenever a new checkbox is added.

answered May 05 '11 at 14:15

Matt Ball

354,903
100
647
710

This is not true. Live will bind to new elements placed in to the DOM. Hence, the "_now and in the future_" in the Description you quoted. – Bryan Ray May 05 '11 at 14:20
And which event, pray tell, does the `imageTickBox` plugin use to style checkboxes? Live does not solve all problems. It is only useful for binding **event** handlers. – Matt Ball May 05 '11 at 14:23
Ah, I see, I see. I misinterpreted the question. This is correct, but still ... you should be able to monitor the 'load' event when the element is loaded in to the DOM and then call the #imageTickBox method, no? – Bryan Ray May 05 '11 at 14:28

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

This is definitely a duplicate question: Please see

jquery live event for added dom elements

Event binding on dynamically created elements?

edited May 23 '17 at 12:29

Community

1
1

answered May 05 '11 at 14:18

Bryan Ray

931
10
26

score 0 · Answer 3 · answered May 05 '11 at 14:18

.live() is for listening to events and then detecting where those events originated from. Adding elements to the page doesn't trigger anything that .live() can listen to. You'll have to call your plug-in initialization whenever you are adding the checkbox to the page.

Using the Live method to bind a function to dynamically created checkboxes

3 Answers3