在由单个页面内的 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>