Javascript 基于同一模板的不同代码段don'；我不会产生同样的结果

在我的项目的一页中，我有一个ITEN列表，列表中的每个项目都有一段代码：

    <div id="edit_evento_${item.id}_2" class="row">
        <form method="post" action="<c:out value="${pageContext.request.contextPath}/evento/altera_evento"/>" id="target">
        <input type="hidden" name="id" value="${item.id}">
        <div class="col-md-3">
            Edi&ccedil;&atilde;o de evento
        </div>
        <div class="col-md-6">
            <table id="hor-minimalist-a">
                <thead>
                    <tr>
                        <th>Atributo</th>
                        <th>Valor</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td> Nome: </td>
                        <td><input type="text" name="nome" value="${item.nome}" size=20 maxlength=40> </td>
                    </tr>

                    <tr>
                        <td> Descri&ccedil;&atilde;o: </td>
                        <td><input type="text" name="descricao" value="${item.descricao}" size=30 maxlength=100> </tdv>
                    </td>

                    <tr>
                        <td> <h3>Periodo da Data</h3> </td>
                        <td>
                            <table>
                                <tr>
                                    <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
                                    <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td> <h3>Periodo do Hor&aacute;rio</h3> </td>
                        <td>
                            <table>
                                <tr>
                                    <td>inicio: <input type="text" id="hora_inicial" name="hora_inicial" value="${item.horaInicial}"/> </td>
                                    <td> final: <input type="text" id="hora_final" name="hora_final" value="${item.horaFinal}"/> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td> Dura&ccedil;&atilde;o: </td>
                        <td><input type="text" name="duracao" value="${item.duracao}" size=20 maxlength=2> Minutos </td>
                    </tr>

                    <tr>
                        <td> </td>
                        <td> <div id="result"></div> </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-lg btn-primary">Salvar</button> <br/>
        </div>
        </form>
    </div>

Ediç&阿蒂尔德；奥德埃维托酒店
心房肌
英勇
诺姆：
描述ç&阿蒂尔德；o:
周期数据
伊尼西奥：
最终：
一段时间的时间；里约
伊尼西奥：
最终：
杜拉和卡迪尔&阿蒂尔德；o:
分钟
萨尔瓦多

与此代码相关，我有一个Jquery代码，它针对列表中的每个项目执行：

<script type="text/javascript">
    $(function(){
        $('#data_inicial').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],

        });
        $('#data_final').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        });
        $('#hora_inicial').timepicker();
        $('#hora_final').timepicker();
    });
</script>

$（函数（）{
$（“#数据_initial”）.datepicker({
是的，
showOtherMonths：是的，
日期格式：“日/月/年”，
dayNamesMin:['Dom'，'Seg'，'Ter'，'Qua'，'Qui'，'Sex'，'Sab']，
});
$（“#数据_最终版”）.datepicker({
是的，
showOtherMonths：是的，
日期格式：“日/月/年”，
dayNamesMin:['Dom'，'Seg'，'Ter'，'Qua'，'Qui'，'Sex'，'Sab']，
});
$（“#hora_inical”）.timepicker（）；
$（'hora_final'）.timepicker（）；
});

我的问题是，对于表单的每个元素，只有列表的第一项具有预期的行为。其他iTen既不打开日期/时间选择器，也不捕获提交操作的输出并以适当的格式显示

谁能看出我做错了什么

注：本页完整代码如下：

---

如果该段代码被多次写出，您将得到多个具有相同id“data\u inicial”或“data\u final”的项目。除了is将生成无效HTML之外，它还将导致jQuery只运行一次，因为jQuery将查找具有该ID的唯一项

应该用同名的类替换ID

<td>inicio: <input type="text" class="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
<td>final: <input type="text" class="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>

---

您的时间选择器也是如此…

在第38行链接到的代码中，您正在使用

迭代许多项。在该foreach中，您正在创建一系列具有

id

属性的标记，这些标记最终具有相同的值id属性在页面上必须是唯一的

如果您想在几个输入字段上使用jQueryUI的日期选择器，那么让这些字段具有

class

属性，并将其用作选择器，而不是现在使用的id选择器

例如，改变：

<tr>
    <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
    <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>
</tr>

<tr>
    <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
    <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>
</tr>

<tr>
    <td>inicio: <input type="text" class="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
    <td>final: <input type="text" class="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>
</tr>

 $('.data_inicial').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd/mm/yy',
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],

    });
 $('.data_final').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd/mm/yy',
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    });