1

I am using a plugin colorpicker on a page and the page has ajax events where elements will be refreshed without page load and therefore rendering the colorpicker too not function as it is not "live" binded. So only works on first load.

I know how to live bind events such as click, change...etc but I have no clue how I can live bind to a plugin?

So my code would look something like this:

$('.box').ColorPicker();

Any help appreciated!

Starx
  • 77,474
  • 47
  • 185
  • 261
  • Side note: if you're using `.live()` for that kind of binding, it's deprecated, use `.on()` instead. – bfavaretto Sep 11 '12 at 23:00
  • yes i was referring to "on" but i just called it live binding. Can you provide a sample code of how it would work? –  Sep 11 '12 at 23:02
  • I just asked because you used the word "live" so much! :) `.on` won't solve your issue, the answer below is your answer. You have to init the plugin manually on the new elements after each ajax request completes. – bfavaretto Sep 11 '12 at 23:06
  • ...not really sure how i could do that as I don't have control of the ajax request... –  Sep 11 '12 at 23:09
  • if only i could say $('.box').on('ColorPicker', function() { //do something }); –  Sep 11 '12 at 23:11
  • Which plugin are you using? Can you link the exact one? – Starx Sep 11 '12 at 23:17
  • @Starx using http://www.eyecon.ro/colorpicker/ –  Sep 11 '12 at 23:24

4 Answers4

1

If thats the case you need to attach the events on the fly once the element is available..

<div class="colorpicker">
    <div class='box'>Color</div>
</div>

<input type="button" id="btn1" value="Add New Color Picker" />    

$(function() {
    // Adding the Default colorPicker here
    $('.box').ColorPicker();

    $('#btn1').on('click' , function(){
        // Add the ColorPicker to the new Element added Here

        $('.colorpicker').append('<div class="box1">New Color</div>');
        $('div div').last().ColorPicker();

    });        
});​

Try this approach..

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
1

Is this what you are looking for

oh and use .on api. and if you keen: What's wrong with the jQuery live method?

Hope it fits your need :)

code

$(document).on('click', '.box', function(){
      $(this).ColorPicker();
});
Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • Thanks for the sample. Where I am confused is the "click" event..I understand this would work for the colorpicker case but in general how could i apply this to other plugins such as a carousel slider plugin where there are no clicks to be made? –  Sep 11 '12 at 23:16
  • @Rick cooleos, No worries `:)` glad it helped, you can call the api on one click evenet i.e. chuck in the api of new plugin say `.foofunction()` inside the click event of the `.box` or call the init function on `document.ready`, hope it helps, flick me a jsfiddle and I will flick you solution if you are still confused `:)` – Tats_innit Sep 11 '12 at 23:18
  • can't do it on jsfiddle because of the ajax part...the ajax is happening in a Wordpress environment in the backend....errr so wish i could show you so i can learn something here. :( –  Sep 11 '12 at 23:25
  • @Rick `:)` no worries - try this as a sample http://jsfiddle.net/WV8df/1/ `:)` load and on click – Tats_innit Sep 11 '12 at 23:33
  • @Rick No worries at all `:)` Glad it helped! – Tats_innit Sep 11 '12 at 23:53
0

Here is a simple answer from the ColorPicker website.

$('#ColorPicker').ColorPickerSetColor(color);

I had the same problem using an ajax update.

Robbie
  • 642
  • 1
  • 6
  • 12
0

You can also live bind plugins via the superlive plugin. Note I have no experience with this plugin, but it looks funky.

https://code.google.com/p/jquery-superlive/

metatron
  • 896
  • 7
  • 14