Warum werden Bootstrap-Optionen nicht festgelegt?

Question

Ich versuche, Laufzeitoptionen für einige Eigenschaften zu einem zufrieden stellenden Div bereitzustellen und JS zu verwenden, um es anzuzeigen. Zum Testen habe ich einige Dateneigenschaften zur Verfügung gestellt.

HTML-Formular:

<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> 

Obwohl die popover die Daten -props nicht zeigt, werden die Laufzeitoptionen nicht angezeigt.

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 this 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(); 
    } 
}); 

Was bin ich?

Answer 1

Nach vielen Stunden des Suchens und Experimentierens, die folgenden für mich gearbeitet:

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