在 HTML 模板的变量中使用 jQuery 查找选择以加载选项

Find select using jQuery inside a var from an HTML template to load options

本文关键字：查找 jQuery 选择 选项 加载 HTML 变量      更新时间：2023-09-26

我有下一个问题：我正在尝试使用模态jQuery表单，这个表单内部通过使用加载的模板动态更改表的内容。这个模板有一个选择，我想在放入文档的那一刻加载数据。

这是模态形式：

<div id="divNuevoPartido" title="Nuevo Partido a introducir" style="display:none;">
    <div id="divJugadoresDelPartido">
        <h3>Introduce n&uacute;mero de jugadores</h3>
        <select id="selectJugadoresDelPartido">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <table id="tableJugadoresDelPartido"></table>
    </div>
</div>
当"selectJugadoresDelPartido"发生变化时，表格"tableJugadoresDelPartido

"会根据数字动态变化，将此模板插入在"selectJugadoresDelPartido"中选择的表格中n次

这是模板，只需 1 行：

<td>
   <label for="jugadorName">Jugador</label>
   <select class="selectorJugadores" name="jugadorName"></select>
   <label for="isWinner">Ganador?</label>
   <input type="checkbox" name="isWinner" />
   <label for="isMvp">MVP?</label>
   <input type="radio" name="isMvp" />
   <label for="puntajeJugador">Puntaje</label>
   <input type="number" name="puntajeJugador" />
   <label for="golesJugador">Goles</label>
   <input type="number" name="golesJugador" />
   <label for="asistenciasJugador">Asistencias</label>
   <input type="number" name="asistenciasJugador" />
   <label for="salvadasJugador">Salvadas</label>
   <input type="number" name="salvadasJugador" />
   <label for="tirosJugador">Disparos</label>
   <input type="number" name="tirosJugador" />
</td>

最后，这是 de JS 代码，它应该插入上面选择的模板 n 次，并在选择".selectorJugadores"中加载数据

function refrescarTablaJugadoresPartido(numJugadores){
    $("#tableJugadoresDelPartido").empty();
    for (var iMax = 0; iMax < parseInt(numJugadores); iMax++) {
        var tmpRow = $("<tr></tr>");
        tmpRow.attr("id", iMax);
        tmpRow.load("views/templates/estadisticas_jugador_partido.html");
        if($.isEmptyObject(usersList))
            cargarJugadores();
        var tmpOption = $("<option></option>");
        tmpOption.html(usersList[0].getCodigo());
        tmpRow.find("select").html(tmpOption);
        $("#tableJugadoresDelPartido").append(tmpRow);
    }   
};

mehtod 内部的所有内容都在工作，但是当我尝试在 tmpRow 中找到选择时，我似乎找不到并且里面没有加载任何东西。

笔记：

  • usersList 是一个全局变量：var usersList = new Array（），带有两个变量的对象：codigo 和 nombre，以这种方式工作正常;
    • 我
  • 加载只是为了使用一个选项进行测试，我注意到它:)
  • cargarJugadores（） 这是一个加载 userList 数组的函数（它正在正常工作）

有什么想法吗？

谢谢你的一切

可能是

在调用 find 命令时文档尚未加载，因为加载是异步的。

您可以将find放在加载的回调中，如下所示：

tmpRow.load("views/templates/estadisticas_jugador_partido.html" , function() {
    tmpRow.find("select").html(tmpOption);
    });

这样，load完成后将调用 find 命令。

相关文章：