Question

当我尝试插入时，我得到了非常不同的结果。经过硬编码的相同popover链接显示我期待的内容。在看到这个硬编码的弹出窗口看起来如何，将其注释掉后，看看当你对空白字段进行模糊验证时它会如何变化，从而触发在标签后插入相同的弹出窗口。我不确定这是否与label元素的内联属性有关，但是当使用insertAfter放置时，popover具有一行的质量。我不确定这里发生了什么，或者我如何克服这个问题。感谢。

＆＃13;

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

＆＃13;

<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">
								<i class="fa fa-user fa-2x fa-fw color-icon1"></i>
							</span>
              <input type="text" id="firstName" name="firstName" size="30" maxlength="30" placeholder="First Name..." />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

＆＃13;

Answer 1

执行第$('[data-toggle="popover"]').popover();行时，它会将popover添加到属性为data-toggle=popover的所有现有元素。但它无法向尚未添加到DOM的元素添加弹出窗口。在你的情况下，你是动态添加元素 - 所以在添加元素后，需要再次定义popover函数/事件。

这可以通过再次编写$('[data-toggle="popover"]').popover();轻松完成。但由于此函数可以多次执行，因此多个事件（完成相同的事情）将附加到元素上。因此，我们需要删除现有事件，然后重新附加事件。这可以使用off函数来完成。

所以最后它变成了$('[data-toggle="popover"]').off('popover').popover();

jSFiddle here

Bootstrap Popover放置了JQuery insertAfter与Hardcoded Bootstrap Popover非常不同

1 个答案: