Plugin doesn't work with appended elements

Question

I use bootstrap-summernote for div element to create WYSIWYG editor. All works fine, but when i append in DOM new div element with same class for bootstrap-summernote, they don't work with them. I read that for new-appended elements i must use something about that (event on)

 $(document).on('click', 'p', function(){
    $(this).hide();
  }); 

So i've wrote:

 $(document).on('load', '.summernote', function(){
        $('.summernote').summernote({
            height: 300,
            lang: 'ru-RU'
        });
    });

And it still doesn't work. But this example with p element works fine: http://jsfiddle.net/xV3HN/1/

Answer 1

As I've mentioned in the comments, I believe the best way to achieve that is to attach the summernote widget to the dynamically created elements at the point they're created.

Something around these lines:

$(function () {
    $("#add").on('click', function () {
        // A new div is being created.
        var div = $('<div>').appendTo($("#container"));

        // Attach the summernote widget to it.
        div.summernote();
    });
});

Demo