How to make a jquery plugin use jquery.live?

Question

Hi

I am kinda in a bind. I got this color picker plugin that I am using and some text-boxes. So the color picker script runs and binds it too these text-boxes. But later on I dynamically load up more text-boxes and I want them to have the color picker plugin put on those text-boxes.

But currently it won't and I have no clue how to make them get this plugin. I tried "live" but that did not work too well.

Answer 1

$('button').live('click', function() {
    functionInvocation( this );
});

That would attach a click event handler to any button elements added. You could adjust this to another type of action, but can you be more specific about what you need and how your color picker specifically works?

Answer 2

How does the color picker script attach itself to the inputs in the first place? With Thickbox, for example, it's simply a call to

tb_init('some-selector-here-to-which-thickboxes-should-be-applied');

Is there a corresponding call for this plugin that you could simply invoke yourself when you add the additional inputs later?

If not, it may require modification of the plugin to support that behavior.

Answer 3

Since the $.live() can potentially slow things down, you might consider rebinding the function every time you create a new textbox.

$("#whateverDiv").append("<input type='text' class='specialTextbox' />";
$(".specialTextbox").colorPicker();

//some time later
$("#anotherDiv").append("<input type='text' class='specialTextbox' />";
$(".specialTextbox").colorPicker();