Automatically calls jQuery plugin for dynamically created element

Question

I need to apply the jQuery plugin to the HTML element that will be created when user input. For instance:

<!-- Upon click, this link creates a new div with an id of 'target'. --> <a id="trigger-a" href="javascript:void(0);">Create a new div</a> /* This will not work because div#target isn't available yet upon page load. */ $(function() { $("div#target").aJQueryPlugin( ... ); }); 

In its simplest form, I can call the plugin inside the <a> click handler after creating the div.

 $(function() { $("#trigger-a").click(function() { // Create div#target. // I can call the plugin here but is there a different, maybe better, way? $("div#target").aJQueryPlugin( ... ); }); }); 

However, if possible, I am looking for something more "automatic"; perhaps using .on() , which automatically calls the plugin when an item becomes available?

To paraphrase the question: In jQuery, is there a way to “control” when a particular item becomes available (i.e., after it's created)? If there is, I would call the plugin or other functions as a callback.

Answer 1

Maybe something like this?

HTML

 <a id="trigger-a" href="javascript:void(0);">Create a new div</a> <div class="cont"></div> 

Js

  $("#trigger-a").click(function() { var $div = $('<div>', {class: 'target', text: 'text'}); $('.cont').append( $div ) $div.trigger('divCreate'); }); $('.cont').on('divCreate', "div.target", function(){ $(this).append( ' added by event' )} ); 

http://jsfiddle.net/Q2UYC/

Running a custom event allows you to bind an event handler later.

Answer 2

If you should verify that the element exists before calling the plugin, perhaps you can try something like this:

 $('#click-here').click(function() { $(this).after('<button class="new-button">I am a new button</button>'); var checkElement = setInterval(function() { if ($('.new-button').length) { $('.new-button').button({'label': 'I am a new fancy button'}); clearInterval(checkElement); } }, 200); }); 

You can see how it works here .

Note that the .button function is the initialization of the jQuery UI plugin, so it should also work for the plugin you need. You should also change the second argument of setInterval to something else, 200 - just show the delay.

Answer 3

You can use 'DOMNodeInserted' which is not a jQuery event.

 $(document).bind('DOMNodeInserted', function(event) { //write your stuff here to check if desired element was inserted or not. alert('inserted ' + event.target.nodeName + // new node ' in ' + event.relatedNode.nodeName); // parent }); 

Answer 4

jQuery delegate and on are good for this. Please note: if you are using older versions of jQuery, you can use delegate , but if you are using the latest version (1.7+), you need to use on .

With them, you must call the method using an already loaded element and use the parameter to specify the element that triggers the event. To make this as efficient as possible, this element must be the closest parent to the dynamically created element.

For example, if you click on the anchor tag, you put the div with the identifier "target" in the container that was already loaded before calling on , with the identifier "container", your on call should be.

 $('#container').on('click', '#target', function(){ $(this).pluginCall(); }); 

You cannot just call on in the #target div, because this element is not yet loaded.

Another solution is to place the built-in $(document).ready() function in the dynamically generated content that your plugin calls. You do not need on or delegate in this case, but this will only work for loadable elements. In the first example, any #target instance that is created from any ajax call will be a click handler.

Answer 5

I will also be interested to see the code that inserts a new DOM object. Suppose this is something like this: (you really shouldn't use onclick handlers)

 $("#trigger-a").click(function() { $(this).after('<div id="someDiv"></div>'); $that = $("#someDiv"); $that.ajQueryPlugin(...); }); 

The best I can do without seeing more information ...

Click the trigger, insert a new div, grab this object and run the plugin on it. Basically you work on a div at the time of creation , no need to "control".

Answer 6

If you cannot connect the plugin at the same time as creating the element (for example, andbeyond in your comment), for some reason my advice was to use the Brandon Aaron LiveQuery plugin:

http://brandonaaron.net/code/livequery/docs

... Live Query also has the ability to run a function (callback) when it matches a new element and another function (callback) when the element is no longer mapped. This provides maximum flexibility and unused use cases.

Hope this is helpful :)

Answer 7

You can use live() or on() for this

 $(document).ready(function(){ $('div#target').on('click',function(){}); });