javascript - 在 HTML 模板的 var 中使用 jQuery 查找选择以加载选项

Question

我有下一个问题:我正在尝试使用模态 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>

最后，这是 JS 代码，它应该插入上面选择的 n 次模板，并在 select '.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);
    }   
};

方法内的所有内容都在工作，但当我尝试在 tmpRow 中查找选择时，我似乎找不到并且内部没有加载任何内容。

注释:

• usersList 是一个全局变量: var usersList = new Array() ，其中一个对象有两个变量:codigo 和 nombre，这样就可以正常工作；
• 我加载只是为了测试一个选项，我注意到了这一点:)
• cargarJugadores() 这是一个加载 userList 数组的函数(它工作正常)

有什么想法吗？

谢谢你所做的一切

Answer 1

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

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

tmpRow.load("views/templates/estadisticas_jugador_partido.html" , function() {

    tmpRow.find("select").html(tmpOption);

    });

这样，一旦load完成，就会调用find命令。