summernote prints "node is null" when initialized

Question

I am building a form with summernote v0.7.3.

Works fine in chrome, but in firefox it give an err "node is null".

<div id="${id}_summernote"></div>
<script type="text/javascript">
  $(document).ready(function(){ 
    var s_note = $('#${id}_summernote');
    var summernote = s_note.summernote();
  }
</script>

The point where the error occurs is ..

var nodeLength = function (node) {
  if (isText(node)) {
    return node.nodeValue.length;
  }

  return node.childNodes.length;
};

it is line 614 in summernote.js.

After that since node is null, other error messages are also showed up

ImagePopover/this.hide()
 summernote.js:6152
ImagePopover/this.update()
 summernote.js:6147
Context/this.invoke()
 summernote.js:1687
Handle/this.update()
 summernote.js:4903
Handle/this.events["summernote.mousedown"]()
 summernote.js:4841
n.event.dispatch()
 jquery-2.1.1.min.js:3
n.event.add/r.handle()
 jquery-2.1.1.min.js:3
n.event.trigger()
 jquery-2.1.1.min.js:3
.trigger/<()
 jquery-2.1.1.min.js:3
.each()
 jquery-2.1.1.min.js:2
n.prototype.each()
 jquery-2.1.1.min.js:2
.trigger()
 jquery-2.1.1.min.js:3
Context/this.triggerEvent()
 summernote.js:1604
Editor/this.initialize/<()
 summernote.js:3745
n.event.dispatch()
 jquery-2.1.1.min.js:3
n.event.add/r.handle()
 jquery-2.1.1.min.js:3

What should I do to fix this? It happens to some of the pages, not all.

Thanks for the answer!

Answer 1

to detour this bug, I changed method $(document).ready() to document.addEventListener('DOMContentLoaded', function(){}, false).

new source for this

document.addEventListener('DOMContentLoaded', function(){       
    var s_note = $('#${id}_summernote');

    var summernote = s_note.summernote({
        height : 200
        , toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'hr']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ]
        }); 


    s_note.on("summernote.change", function (e) {
        //do jobs for changing event
    }); 
});

unfortunately, adding callbacks to constructor does not work, so use jquery event handler.

Have a lovely day ! :D