0

I try to build my own custom checkbox plugin using jQuery, and it works great, but how do I attach functions (not click / focus.. events) to future created inputs (by ajax for example) without calling the plugin again every time?

This code didn't help:

$(document).on('ready', 'input[type=checkbox]', function...

How can I make it work?

Alon Pini
  • 581
  • 1
  • 3
  • 19
  • You can't make that work, as it makes no sense ? – adeneo Aug 22 '13 at 20:21
  • well, you can make it work, but the code you've attempted is very far from what you would need. – Kevin B Aug 22 '13 at 20:22
  • What do these functions do exactly ? – adeneo Aug 22 '13 at 20:24
  • I don't know what you mean by "attach functions (not click / focus.. events)" to elements. Attaching a function to an element has no meaning, but setting a handler to listen for events (e.g. click, focus, ready, etc.) makes sense. Are you talking about setting a `ready` handler that will fire even when a new element is added to the document? – Justin Morgan - On strike Aug 22 '13 at 20:28
  • @JustinMorgan - only the current document has a ready handler ? – adeneo Aug 22 '13 at 20:28
  • @adeneo - I want to replace the regular checkboxes with my own checkboxes made of another elements. – Alon Pini Aug 22 '13 at 20:30
  • @JustinMorgan - Yes, I need to set handler that fires when a new element is added. – Alon Pini Aug 22 '13 at 20:32
  • @adeneo - I'm only trying to understand what he wants. – Justin Morgan - On strike Aug 22 '13 at 20:33
  • 1
    If you are adding them though ajax, you should just run a callback on completion – Daniel Aug 22 '13 at 20:33
  • Aren't you adding those elements yourself, so you should know when they are added ? – adeneo Aug 22 '13 at 20:33
  • @adeneo - Lets use an example. I have a long form and I use AJAX about 5 times, should I call my plugin **each** time I use AJAX? What if I make more plugins? More calls? – Alon Pini Aug 22 '13 at 20:38
  • You should call it anytime your ajax would create new checkboxes – Daniel Aug 22 '13 at 20:39
  • @AlonPini Yes, in that case you shoudl call your plugin each time you use Ajax, only on the new elements. That would be the most efficient way to do it. Maintenance-wise, you could abstract that behind a function or even a class so that it can be re-used easily. – Kevin B Aug 22 '13 at 20:39
  • You can also trigger events programmatically. Set an event handler using your code and then call `$(myNewInput).trigger('eventName')` at the end of the AJAX call. `eventName` can be anything you like, even something made up, as long as there's a handler listening for it. – Justin Morgan - On strike Aug 22 '13 at 20:42
  • 1
    http://stackoverflow.com/questions/7692730/dom-mutation-event-in-jquery-or-vanilla-javascript – Daniel Aug 22 '13 at 20:42

1 Answers1

1

That's what DOM mutation events are for.

For newer browser, use DOM mutation observers.

Here's a tutorial to get you started:

Detect DOM changes with Mutation Observers.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • What about browser support? IE8 at least? – Alon Pini Aug 22 '13 at 20:29
  • 1
    @AlonPini - Sorry. No IE8 support. If you really need it, there's a way to kinda hack IE8 to get some similar functionality. Check out this post: http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom – Joseph Silber Aug 22 '13 at 20:32
  • I prefer to use the newer API and polyfills for outdated browser compatibility. – fardjad Aug 22 '13 at 20:32
  • @fardjad - me either, but in the country I live in, where lots of people didn't even heard about Windows 7, that makes a little problem... – Alon Pini Aug 22 '13 at 20:40