我正在尝试将一些属性的运行时选项提供给contenteditable div并使用JS来显示它。为了测试,我提供了一些数据属性。
HTML表单:
<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>
虽然popover确实显示了数据-props,但是不会显示运行时选项。
的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();
}
});
我错过了什么?
答案 0 :(得分:0)
经过数小时的搜索和实验,以下内容对我有用:
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;
}