jQuery Repeater 在用 ajax 生成的部分中不起作用

Question

在一个由单个页面中的ajax生成的几个步骤组成的表单中，我必须在中间步骤中使用jquery.repeater。

特定于转发器的表单代码位于专用部分

但是jquery.repeater不起作用，当我单击添加或删除按钮时没有任何反应，控制台中甚至没有一条javascript错误消息。

如果我在没有 ajax 加载的情况下直接在页面中使用此部分，它可以工作。

请注意，我在 ajax 处理程序方法中使用了推送部分更新方法

return [ '#myDiv' => $this->renderPartial('mypartial') ];

欢迎帮助伙伴。

这是我使用的代码

和脚本声明在我的布局底部

...
<!-- Scripts -->
<script src="{{ [
    'assets/javascript/jquery-3.2.1.min.js',
]|theme }}"></script>
{% framework extra %}
{% scripts %}
</body>
</html>

我的部分

<form class="repeater">
    <!--
        The value given to the data-repeater-list attribute will be used as the
        base of rewritten name attributes.  In this example, the first
        data-repeater-item's name attribute would become group-a[0][text-input],
        and the second data-repeater-item would become group-a[1][text-input]
    -->
    <div data-repeater-list="group-a">
      <div data-repeater-item style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>
    </div>
    <input data-repeater-create type="button" value="Add" />
</form>

我的页面

title = "Ajouter"
url = "/tableau-de-bord/espace/ajouter"
layout = "dashboard"
is_hidden = 0
[formulaireCreation]
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<div id='formulaire-creation-component-wrapper'>
    {% component 'formulaireCreation' %}
</div>

我的中继器.js

$(document).ready(function () {
    $('.repeater').repeater({
        // (Optional)
        // "show" is called just after an item is added.  The item is hidden
        // at this point.  If a show callback is not given the item will
        // have $(this).show() called on it.
        show: function () {
            $(this).slideDown();
        },
        // (Optional)
        // "hide" is called when a user clicks on a data-repeater-delete
        // element.  The item is still visible.  "hide" is passed a function
        // as its first argument which will properly remove the item.
        // "hide" allows for a confirmation step, to send a delete request
        // to the server, etc.  If a hide callback is not given the item
        // will be deleted.
        hide: function (deleteElement) {
            if(confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        },
    })
});

最后，为了进行比较，在基本页面中工作的代码

title = "repeater-test"
url = "/repeater-test"
layout = "dashboard"
is_hidden = 0
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.min.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<form class="repeater">
    <div data-repeater-list="group-a">
      <div data-repeater-item style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>
    </div>
    <input data-repeater-create type="button" value="Add" />
</form>

Answer 1

好的，我找到了一个解决方案，不是很优雅，但它有效

当带有转发器的部分在 ajax 中加载时，就好像页面忘记了在页面级别用 addJS 声明的脚本，所以我直接在部分末尾使用 <script src="/path/to/myscript.js"> 声明了脚本，它可以工作

尝试用{% put scripts %}注入脚本，但不起作用

Answer 2

使用 JqueryRepeater 就像在地狱里工作一样。从视觉上看，这太棒了，但是编码基本内容以外的内容就像每次都在踢-gg-一样！

似乎jQuery不能很好地检测每一行的新字段，但是使用纯JavaScript是可能的。

例如，要更改新生成的输入的值...

Document. getElementsByName ( "your-data-repeater-list[1][field_name]")[0].Value =  "My new value";

其中 [1] 是新的中继器编号

我花了几天(和几夜！(使用这个组件，只要有耐心，就可以做任何你想做的事情。

玩得愉快！