summernote airMode not working correctly in div

Question

just wondering why airMode in the top div is working, but not in my generated one?

html:

 <div id="airnote">
 Initialized with airMode </div>
 <div>
 <input type="text" id="textbox" /><a href="#" id="change">Change</a>
 </div>

javascript:

$('#airnote').summernote({airMode: true
});
$('#div1').summernote({
airMode: true
});
var textbox = $("#textbox");
var div1 = $("<div id='div1'>Initialized with airMode</div>");
$("#change").click(function() {
if ($("#textbox").length === 1) {
div1.val(textbox.val());
textbox = textbox.replaceWith(div1);
} else {
textbox.val(div1.val());
div1 = div1.replaceWith(textbox);
}
});

jsfiddle

Answer 1

That is because #div1 do not exists when you are trying to initialize summernote on it. You will need to initialize summernote after appending the new element:

$("#change").click(function() {
if ($("#textbox").length === 1) {
 div1.val(textbox.val());
 textbox = textbox.replaceWith(div1);
  $('#div1').summernote({
     airMode: true
 });
} else {
 textbox.val(div1.val());
 div1 = div1.replaceWith(textbox);
}});