Bootstrap Popover, помещенный в JQuery insertAfter Very Different Than Hardcoded Bootstrap Popover

Я получаю очень разные результаты, когда пытаюсь вставить. После той же самой поп-ссылки, которая была жестко закодирована, чтобы показать вам, чего я ожидаю. После того, как вы увидите, как выглядит этот hardcoded popover, прокомментируйте его и посмотрите, как он изменяется, когда вы выполняете проверку правильности пустого поля, запуская тот же самый popover, который будет вставлен после метки. Я не уверен, связано ли это с встроенными свойствами элемента label, но popover, когда он помещен в insertAfter, имеет одно качество линии. Я не уверен, что здесь происходит или как я могу это преодолеть. Благодарю.Bootstrap Popover, помещенный в JQuery insertAfter Very Different Than 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>

источник

2015-11-07 John Stafford

См [это] (http://jsfiddle.net/taleebanwar/t1e7LL7q/) jsFiddle. Так что же другое? (Я немного модифицировал js для работы popover) – Taleeb

$ ('[data-toggle = "popover"]'). Off ('popover'). Popover(); Это то, что вы добавили, чтобы заставить его работать? Похоже, теперь это нужно. Что это делает? –

Я не вижу, что вы могли изменить, что изменило ситуацию. Похоже, вы просто переключили popover после вставки. Все еще не видите, что вы изменили, чтобы повлиять на поведение. Выглядит неплохо. –

Когда линия $('[data-toggle="popover"]').popover(); выполняется - это добавляет поповер всему существующему элементу с атрибутом data-toggle=popover. Но он не может добавлять popovers к элементам, которые еще не добавлены в DOM. В вашем случае вы добавляете элемент динамически - поэтому после добавления элемента необходимо снова определить функцию/событие popover.

Это легко сделать, написав $('[data-toggle="popover"]').popover(); еще раз. Но так как эта функция может выполняться несколько раз, поэтому к элементу будет привязано несколько событий (что делает то же самое). Поэтому нам нужно удалить существующее событие, а затем снова подключить событие. Это можно сделать с помощью функции off.

Итак, наконец, становится $('[data-toggle="popover"]').off('popover').popover();

jSFiddle here

источник

2015-11-07 04:17:01 Taleeb

Спасибо Taleeb. Я ценю ваш тщательный ответ, объясняя это мне. –

Bootstrap Popover, помещенный в JQuery insertAfter Very Different Than Hardcoded Bootstrap Popover

ответ

Смежные вопросы