Using a plugin on dynamically generated HTML

Question

I'm generating some HTML at runtime and I'm wondering how to make a plugin work on the newly created HTML. I've got something that looks llike this:

<input type="text" class="SomeClass">
<div id="Test"></div>

<script>

    function Start() {

        setTimeout(function () {

            $('#Test').html('<input type="text" class="SomeClass">');

        }, 1000);       
    }

    $(".SomeClass").SomePlugin();

    $(Start);

</script>

The input element has all the functionalities of the plugin but when I add the HTML inside the Test div the input element inside there doesn't work as expected. How can I use the plugin on dynamically generated HTML?

@juvian: yes, I know I can do that but that's what I'm looking to avoid doing. — frenchie, Mar 25 '15 at 18:50
What is the use of $(Start)? aren't you just trying to do: Start(); ? or, $(document).ready(Start);? Additionally, the Start() is called after .SomePlugin, meaning the dynamic html is getting rendered by the plugin. — JasonWilczak, Mar 25 '15 at 18:50
@JasonWilczak: yes, it's just a shorthand notation I use for document.ready() — frenchie, Mar 25 '15 at 18:51
Oh, ok, cool, Then try $(Start); $('.SomeClass').SomePlugin(); — JasonWilczak, Mar 25 '15 at 18:52
Only other way is triggering an event on #test like newElAdded, listen for that and activate plugin, but would be the same as using the plugin directly — juvian, Mar 25 '15 at 18:55
If you just want to avoid writing the call to the plugin manually, you could override jquery html and do something like this: http://jsfiddle.net/rf8jwywk/ (only calls plugin for new elements) — juvian, Mar 25 '15 at 19:05
@juvian: you should add your comment as an answer; overriding .html() might be the only way to do it. — frenchie, Mar 25 '15 at 19:10

juvian · Accepted Answer · 2015-03-26T17:38:42.643

For plugin to work with new created elements, you need to init the plugin on those elements for it to work. There are several ways to do this, such as calling it again when new elements are added.

If you just want to avoid changing your code and adding that, you could override jquery html to check if you are adding an element with SomeClass and call the plugin for it automatically:

(function($)
{
    var oldhtml = $.fn.html; //store old function
    $.fn.html = function() //override html function
    {
        var ret = oldhtml.apply(this, arguments); // apply jquery html
        if(arguments.length){
            if(ret.find(".SomeClass").length){
                ret.find(".SomeClass").SomePlugin(); // call plugin if the html included an element with .SomeClass
            }
        }
        return ret;
    };
})(jQuery);




    $.fn.SomePlugin = function() {
      $("body").append("plugin activated <br/>");
    }

    function Start() {

      setTimeout(function() {

        $('#Test').html('<input type="text" class="SomeClass">');
        $('#Test').html()

      }, 1000);
    }

    $(".SomeClass").SomePlugin();

    $(Start);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="SomeClass">
<div id="Test"></div>

You answer works brilliantly! I would add one HUGE HUGE modification!! If at some point in the code you call .html() with no arguments, it will bug. So you need to add a condition to test if there are arguments, like this: if (arguments.length && ret.find('.SomeClass').length) instead of just if(ret.find(".SomeClass").length) — frenchie, Mar 26 '15 at 00:15

score 0 · Answer 2 · edited May 23 '17 at 11:50

I opted for a solution that used jQuery promises. Here is the Fiddle

The HTML (basic copy of yours):

<input type="text" class="SomeClass">
<div id="Test"></div>

The Javascript:

$.fn.SomePlugin = function(){
    $(this).val("plugin activated");
}

function Start() {

    alert('hi from start');
         $('#Test').html('<input type="text" class="SomeClass">');

    return $.when();
}

$(document).ready(function(){  
    Start().then(function () {
        alert('hi from done');
        $(".SomeClass").SomePlugin();
    });
});

I had some issue with the $(Start) so i opted for the document.ready approach. The only real difference is that Start returns $.when (SO Post Here) and I chain a 'then' after the call to start. This allows the page to setup and then you can run any plugins that you want and ensure that the required elements are in the DOM before the plugin attempts to manipulate them.

Using a plugin on dynamically generated HTML

2 Answers2