Javascript 在视口更改之前，栓带元素位置不正确

我一直在玩很棒的插件：

我在手动加载引导（v3）弹出窗口时遇到问题，视口外的弹出窗口将显示在视口底部的错误位置。所以我决定尝试使用这个插件作为替代

我一直在尝试使用一个基本的tether选项来验证我表单中的一个输入，表单是使用laravel form builder生成的。（

formgroup

的输入是目标元素）

问题：

{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}

<div class="row">
    <div class="form-group col-lg-12 title">
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
    </div>
</div>
<div class="row">
    <div class="form-group col-lg-12 body">
        {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
    </div>
</div>

{!! Form::close() !!}

<script type="text/javascript">
    $( document ).ready(function()
    {
        var errors = ({!! json_encode($errors->toArray()) !!});
        var form = ({!! json_encode($form) !!});
        console.log(errors);
        outputValidationPopovers(form, errors);
    });
</script>

function outputValidationPopovers(formId, errors)
{
    $.each(errors, function (eKey, messages)
    {
        var $newPopover =  $('<div class="tether-'+eKey+'">stuff</div>');
        $newPopover.css('z-index', '1030').css('background-color', 'red');
        $(formId).append($newPopover);

        new Tether(
            {
                element: '.tether-'+ eKey,
                target: '.'+eKey,
                attachment: 'middle right',
                targetAttachment: 'middle right',
            });
   });
}

但由于某些原因，它似乎加载到目标元素的左侧（位置不正确）。当视口更改（页面大小调整或滚动等）时，它会更新到目标元素的右侧（在正确的位置）

我不知道它为什么会这样做，我有没有办法把它装到正确的位置

示例：

{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}

<div class="row">
    <div class="form-group col-lg-12 title">
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
    </div>
</div>
<div class="row">
    <div class="form-group col-lg-12 body">
        {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
    </div>
</div>

{!! Form::close() !!}

<script type="text/javascript">
    $( document ).ready(function()
    {
        var errors = ({!! json_encode($errors->toArray()) !!});
        var form = ({!! json_encode($form) !!});
        console.log(errors);
        outputValidationPopovers(form, errors);
    });
</script>

function outputValidationPopovers(formId, errors)
{
    $.each(errors, function (eKey, messages)
    {
        var $newPopover =  $('<div class="tether-'+eKey+'">stuff</div>');
        $newPopover.css('z-index', '1030').css('background-color', 'red');
        $(formId).append($newPopover);

        new Tether(
            {
                element: '.tether-'+ eKey,
                target: '.'+eKey,
                attachment: 'middle right',
                targetAttachment: 'middle right',
            });
   });
}

页面加载（位置不正确）：

视口更改（正确位置）：

HTML:

{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}

<div class="row">
    <div class="form-group col-lg-12 title">
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
    </div>
</div>
<div class="row">
    <div class="form-group col-lg-12 body">
        {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
    </div>
</div>

{!! Form::close() !!}

<script type="text/javascript">
    $( document ).ready(function()
    {
        var errors = ({!! json_encode($errors->toArray()) !!});
        var form = ({!! json_encode($form) !!});
        console.log(errors);
        outputValidationPopovers(form, errors);
    });
</script>

function outputValidationPopovers(formId, errors)
{
    $.each(errors, function (eKey, messages)
    {
        var $newPopover =  $('<div class="tether-'+eKey+'">stuff</div>');
        $newPopover.css('z-index', '1030').css('background-color', 'red');
        $(formId).append($newPopover);

        new Tether(
            {
                element: '.tether-'+ eKey,
                target: '.'+eKey,
                attachment: 'middle right',
                targetAttachment: 'middle right',
            });
   });
}

{！！Form:：model（$article=new\App\article，['id'=>'Form article'，'route'=>'articles.store'，'class'=>'row']）
{！！表单：：text（'title'，null，['id'=>'title'，class'=>'表单控件'，'placeholder'=>'title']）
{！！Form:：textarea（'body'，null，['id'=>'body'，class'=>'Form control'，'placeholder'=>'body']）
{！！Form:：close（）！！}
$（文档）.ready（函数（）
{
var errors=（{！！json_encode（$errors->toArray（））！！}）；
var form=（{！！json_encode（$form）！！}）；
console.log（错误）；
outputValidationPopovers（表单、错误）；
});

JAVASCRIPT:

{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}

<div class="row">
    <div class="form-group col-lg-12 title">
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
    </div>
</div>
<div class="row">
    <div class="form-group col-lg-12 body">
        {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
    </div>
</div>

{!! Form::close() !!}

<script type="text/javascript">
    $( document ).ready(function()
    {
        var errors = ({!! json_encode($errors->toArray()) !!});
        var form = ({!! json_encode($form) !!});
        console.log(errors);
        outputValidationPopovers(form, errors);
    });
</script>

function outputValidationPopovers(formId, errors)
{
    $.each(errors, function (eKey, messages)
    {
        var $newPopover =  $('<div class="tether-'+eKey+'">stuff</div>');
        $newPopover.css('z-index', '1030').css('background-color', 'red');
        $(formId).append($newPopover);

        new Tether(
            {
                element: '.tether-'+ eKey,
                target: '.'+eKey,
                attachment: 'middle right',
                targetAttachment: 'middle right',
            });
   });
}

函数outputValidationPopovers（formId，错误）
{
$.each（错误、功能（eKey、消息）
{
var$newPopover=$（'stuff'）；
$newPopover.css（'z-index'，'1030'）.css（'background-color'，'red'）；
$（formId）.append（$newPopover）；
新系绳(
{
元素：'.tether-'+eKey，
目标：'.'+eKey，
附件:"右中",，
targetAttachment:'中间右侧'，
});
});
}

关于如何解决这个问题，我们没有任何建议。。。因此，我最终通过使用另一个插件解决了这个问题，该插件使用tether作为依赖项。这个插件被调用，非常适合需要的需求。我改变了函数，将其包括进来，而不是tether初始化

        var drop = new Drop({

            target: $input.closest('.form-group')[0],
            content: messages[0],
            classes: 'drop-theme-arrows-bounce drop-danger drop-form-'+formId+' target-' + eKey + ' ' + popoverClass,
            position: 'right middle',
            openOn: 'always'
        });