javascript - Why are bootstrap options not being set? -

i trying supply runtime options properties contenteditable div , use js show it. testing, have supplied data propertirs.

html form:

<form id="form-email-preview" style="margin-top: 24px;">     <div id="main-container" class="hidden" style="border: 1px solid orange; padding: 6px;  border-radius: 8px;">         <div id="subject-container" class='hidden' style="display: inline; padding-left: 4px;">             <span>subject: </span><input id="subject" type="text" value="manuscript request" />         </div>         <div id="mail-container" contenteditable data-toggle="popover" data-trigger="focus" data-placement="right" data-title ="required field" style="display: inline-block"></div><br/>         <p id="buttons" class="hidden">             <input type='button' id='send-email' class='btn btn-custom-success' value='send email' /><span>   </span>             <button id='cancel-email' class = 'btn btn-danger'>cancel</button>         </p>     </div>     <div id="current-row" class="hidden"></div>     <input id="current-checkbox" type="checkbox" class="hidden" />     <input id="current-tr" type="number" class="hidden" /> </form> 

although popover show data -props, runtime options not displayed.

javascript

$('[data-toggle=popover]').popover();  ,,,  $("#send-email").on('mousedown', function (e) { //$("#form-email-preview").on('submit', function (e) { //doesn't fire? //    e.preventdefault();     var mc = $("#mail-container");     //debugger     if (!$.trim(mc.val())) {         mc.popover({content: 'please fill in field.', placement: 'top', trigger: 'focus'});         mc.popover('show');         mc.focus();         return false;     }     var data = {};     data.action = "manuscript-request-email";     data["writers-id"] = $("#writer-id").val();     data["account-id"] = localstorage.getitem("account-id");     data.subject = $("#subject").val();     data.body = $("#mail-container").html();     ajax('post', 'php/writers.php', data, sentemail);     function sentemail(result) {         console.log("email-res=" + result);         return2table();     } }); 

what missing?

after many hours of searching , experimentation, following worked me:

    var mc = $("#mail-container");     if (!$.trim(mc.text())) {         mc.popover("destroy").popover({ content: "please fill out field", placement: 'right' });         mc.popover('show');         mc.focus();         return false;     }