jQuery - Fire a function on a element

Question

I need to add a color picker to some input elements. I'm using

$(".element").colorPicker(){ ... }

This works perfectly. The problem is that the page has a AJAX form, which - when submitted - will overwrite the previous form with a new one (new input fields etc). After that the colorPicker stops working.

So how can I fire that function to the newly created inputs too?

Answer 1

只需在ajax回调中重新附加调用即可，因为我不相信有一个可靠的事件可用于.live或.delegate它，而不会透露更多信息。

Answer 2

I believe this might work:

$(".element").live('click focus', function () {
    var $this = $(this);
    if (!$this.data('hasColorPicker')) {
        $this.colorPicker({ /* ... */ }).data('hasColorPicker', true);
        $this.click(); // trigger the color picker - assuming it binds itself to the click event
    }
});

Answer 3

meder所说的是好的，但是，如果您通过复制现有元素来创建新元素，请考虑使用$.clone(true)进行复制，它也将继承现有的事件绑定。