0
當我嘗試插入相同的彈出窗口鏈接之後，我得到了非常不同的結果，該窗口鏈接已經硬編碼以顯示出我期望的內容。在看到這個硬編碼彈出窗口的外觀之後，將其註釋掉，看看它是如何變化的，如果對空白字段進行模糊驗證，將觸發相同的彈出窗口插入到標籤之後。我不確定這是否與標籤元素的內聯屬性有關，但與insertAfter一起放置時的彈出窗口具有一行的質量。我不確定這裏發生了什麼，或者我如何克服這一點。謝謝。使用JQuery插入Bootstrap Popover與使用Hardcoded Bootstrap Popover非常不同
(function($) {
$(window).load(function() {
$('[data-toggle="popover"]').popover();
function getLabel(el) {
return $("label[for=" + $(el).attr("id") + "]");
}
function insertInvalidIconAndErrorMsg(label, errorTitle, errorMsg) {
$("<a title='" + errorTitle + "' data-toggle='popover' class='invalidIconAndErrorMsg' data-trigger='hover' data-placement='top' data-content='" + errorMsg + "'>Error!</a>").insertAfter($(label));
}
function validateInputText(el) {
var label = getLabel(el);
if (!$(el).val().trim().length > 0) {
insertInvalidIconAndErrorMsg(label, "Required Field", "Required Fields Can not Be Left Blank.")
}
}
$(":input").on('blur', (function() {
validateInputText(this);
}));
});
})(jQuery);<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<!DOCTYPE>
<html>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<br />
<br />
<br />
<br />
<label for="firstName">First Name*</label>
<!-- COMMENT THIS LINE OUT AFTER YOU HOVER OVER LINK--><a title='errorTitle' data-toggle='popover' class='invalidIconAndErrorMsg' data-trigger='hover' data-placement='top' data-content='Required Field Can Not Be Left Blank'>Error!</a>
<div class="grpWrapper">
<div class="input-group form-group">
<span class="input-group-addon color">
\t \t \t \t \t \t \t \t <i class="fa fa-user fa-2x fa-fw color-icon1"></i>
\t \t \t \t \t \t \t </span>
<input type="text" id="firstName" name="firstName" size="30" maxlength="30" placeholder="First Name..." />
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
參見[這]（http://jsfiddle.net/taleebanwar/t1e7LL7q/）的jsfiddle。那麼有什麼不同呢？ （我修改了js，讓popover有點工作） – Taleeb
$（'[data-toggle =「popover」]'）。off（'popover'）。popover（）;這是你添加了什麼使它工作？它看起來應該現在。這是做什麼的？ –
我沒有看到你可以改變，這在這裏造成了不同。看起來你只是在插入後關閉popover。仍然沒有看到你改變了什麼來影響行爲。雖然看起來不錯。 –