Почему wysihtml5 не загружается в моем текстовом поле?

Question

Скрипт отлично подходит для текстового поля в теле страницы. Однако он не работает в текстовом поле, создаваемом динамически Javascript. Следуя этому, я приложил сценарий. PHP inc/toolbar.php включает панель инструментов редактируемого текстового поля. Как добавить визуальный редактор в те все текстовые области? Это часть информационного бюллетеня CMS, которое я разрабатываю. Я просто хочу, чтобы редактор вставлял в текстовое поле. Я загрузил демо здесь http://benchmarkinc.com.au/test/. Пожалуйста, помогите решить эту проблему. Я совершенно уверен, что этот учебник http://toddmotto.com/attaching-event-handlers-to-dynamically-created-javascript-elements/ точно показывает ту же проблему, с которой я столкнулся. Однако я не мог связать свою проблему.

<script> 

    //Case summary 
    var editor = new wysihtml5.Editor("case_summary",{ 
    toolbar:  "toolbar2", 
    stylesheets: "css/wyiswyg.css", 
    parserRules: wysihtml5ParserRules 
    }); 

      var editor = new wysihtml5.Editor("casesum",{ 
    toolbar:  "toolbar3", 
    stylesheets: "css/wyiswyg.css", 
    parserRules: wysihtml5ParserRules 
    }); 

</script> 


<textarea class="form-control" name="case_summary[]" id="case_summary" rows="20"></textarea> 


function addRow(frm) { 
    caseNum ++; 
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div> <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr /> </div>'; 
    jQuery('#caseAdd').append(row); 
    document.getElementById("case_title").value = document.case_title.value; 
    document.getElementById("case_summary").value = document.case_summary.value; 
} 

Answer 1

Я пробовал с решением Syed, но это не сработало. Я немного изменил его, добавив только функцию в редактор wysihtml5, и он отлично работал. Итак, вот выглядит последний код. Хотя не имеет смысла, почему это сработало. Спасибо, ребята, за помощь.

function addRow(frm) { 
    caseNum ++; 
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div> <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr /> </div>'; 
    jQuery('#caseAdd').append(row); 
    document.getElementById("case_title").value = document.case_title.value; 
    document.getElementById("case_summary").value = document.case_summary.value; 

    callEventHandler(); //function call 
} 

function callEventHandler() 
{ 
var editor = new wysihtml5.Editor("casesum",{ 
    toolbar:  "toolbar3", 
    stylesheets: "css/wyiswyg.css", 
    parserRules: wysihtml5ParserRules 
    }); 
} 

Answer 2

Просто обернуть код JQuery готов

jQuery(document).ready(function(){ 
//Case summary 
    var editor = new wysihtml5.Editor("case_summary",{ 
    toolbar:  "toolbar2", 
    stylesheets: "css/wyiswyg.css", 
    parserRules: wysihtml5ParserRules 
    }); 

      var editor = new wysihtml5.Editor("casesum",{ 
    toolbar:  "toolbar3", 
    stylesheets: "css/wyiswyg.css", 
    parserRules: wysihtml5ParserRules 
    }); 
}) 

Answer 3

Один подход будет добавить wysihtml5 обработчик в вашей addRow функции, после добавления элемента в организме.

function addRow(frm) { 
    caseNum ++; 
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div> <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr /> </div>'; 
    jQuery('#caseAdd').append(row); 
    document.getElementById("case_title").value = document.case_title.value; 
    document.getElementById("case_summary").value = document.case_summary.value; 

    var editor = new wysihtml5.Editor("casesum",{ 
     toolbar:  "toolbar3", 
     stylesheets: "css/wyiswyg.css", 
     parserRules: wysihtml5ParserRules 
    }); 
}