奇怪的jQuery数据行为

Question

我的问题背后的背景非常复杂，所以我会尽量简化它。

我正在创建一个应用程序，用户从select2中选择一个选项，并根据该选择，进行AJAX调用以填充另一个选择，并根据该选择出现另一个选择。我在＆＃34;创建＆＃34;视图，它工作正常，但在编辑视图中，必须已选择所有选择，所以在这种情况下，我不进行AJAX调用;我刚刚从数据库中提取数据，因为我已经知道选择了哪个选项，我只是将所选属性添加到所选的选项中。这很好用。问题是这个选择有一个改变功能（即被正确调用），但由于某种原因，当提示输入所拥有的数据属性时，所选选项不会返回任何内容。我在Chrome控制台中进行了手动测试，这是输出：

正如您在图片中看到的那样，当我使用所选选项查询元素时，我得到它没有问题，我甚至可以看到数据标签在那里，但如果我尝试用它来获取它数据函数，它返回undefined。此外，如果我尝试将第一行分配给变量，它会指定一个未定义的值。

关于为什么会发生这种情况的任何想法？

编辑：

HTML渲染：

<div class="row">
    <label for="objeto-relacionado" class="control-label"> Asociar a otro objeto</label>
    <select id="seleccion-objeto" class="select2" name="objeto-relacionado"
            style='background-color: #fff;'>
        <option value=''></option>
        <option value="sangria" ${(tipo == 'sangria') ? "selected" : ""}>
            Sangría
        </option>
    </select>
</div>
<c:choose>
    <c:when test="${accion == 'Create'}">

        <div id="fila-select-sangria" class="row" hidden="true">
            <label for="sangria" class="control-label"> Sangría por asociar</label>
            <select id="seleccion-sangria" name="sangria"
                    style='background-color: #fff;'>
                <option value=''></option>
            </select>
        </div>

        <div id="fila-select-dia" class="row" hidden="true">
            <label for="sangria" class="control-label"> Día por asignar</label>
            <select id="seleccion-dia" name="dia"
                    style='background-color: #fff;'>
                <option value=''></option>
            </select>
        </div>

    </c:when>
    <c:otherwise>
        <div id="fila-select-sangria" class="row">
            <label for="sangria" class="control-label"> Sangría por asociar</label>
            <select id="seleccion-sangria" name="sangria"
                    style='background-color: #fff;'>
                <option value=''></option>
                <c:forEach items="${sangrias}" var="sangria">
                    <c:if test="${sangria.getId_sangria() == id_sangria}">
                        <c:set var="sangria_seleccionada" value="${sangria}" /> 
                    </c:if>

                    <option value="${sangria.getId_sangria()}"
                            data-fecha-1="${sangria.getFecha_dia1()}"
                            data-fecha-2="${sangria.getFecha_dia2()}"
                            data-fecha-3="${sangria.getFecha_dia3()}"
                            ${(sangria.getId_sangria() == id_sangria) ? "selected" : ""}>
                        ${sangria.getId_sangria_especial()}
                    </option>
                </c:forEach>
            </select>
        </div>
        <div id="fila-select-dia" class="row">
            <label for="sangria" class="control-label"> Día por asignar</label>
            <select id="seleccion-dia" name="dia"
                    style='background-color: #fff;'>
                <c:if test="${sangria_seleccionada.getFecha_dia1() != null}">
                    <option value="1" ${(dia == 1 ? "selected" : "")}>Día 1</option>
                </c:if>
                <c:if test="${sangria_seleccionada.getFecha_dia2() != null}">
                    <option value="1" ${(dia == 2 ? "selected" : "")}>Día 2</option>
                </c:if>
                <c:if test="${sangria_seleccionada.getFecha_dia3() != null}">
                    <option value="1" ${(dia == 3 ? "selected" : "")}>Día 3</option>
                </c:if>
            </select>
        </div>
    </c:otherwise>
</c:choose>

Javascript代码：

/*
 * Funciones de eventos
 */

$("#seleccion-objeto").change(function () {
    if ($(this).find("option:selected").val() === "sangria") {
        $.ajax({
            url: "/App/Module/Model",
            type: "GET",
            data: {"accion": "sangriasajax"},
            dataType: "json",
            success: function (datos) {
                generar_select_sangria(datos);
            }
        });
    }
});

function generar_select_sangria(datos) {

    $("#fila-select-sangria").show();

    var select_sangria = $("#seleccion-sangria");
    select_sangria.select2();

    select_sangria.change(evento_seleccionar_sangria);

    for (i = 0; i < datos.length; i++) {
        var elemento = datos[i];
        var opcion = $("<option>");
        opcion.val(elemento.id_sangria);
        opcion.text(elemento.identificador);
        opcion.data("indice", i);
        opcion.data("fecha-1", elemento.fecha_dia1);
        opcion.data("fecha-2", elemento.fecha_dia2);
        opcion.data("fecha-3", elemento.fecha_dia3);

        select_sangria.append(opcion);
    }
}

function evento_seleccionar_sangria() {
    $("#fila-select-dia").show();

    var select_dia = $("#seleccion-dia");
    select_dia.find("option").remove();
    select_dia.append($("<option>"));
    select_dia.change(evento_seleccionar_dia);

    var opcion_seleccionada = $(this).find("option:selected");
    alert(opcion_seleccionada.val());

    /* Here is where I am getting undefined while on the Edit option if using .data("fecha-x") or in the Create option if using .attr("data-fecha-x") so none of this ifs enter */

    if (opcion_seleccionada.attr("data-fecha-1") !== undefined) {
        var opcion = $("<option>");
        opcion.text("Día 1");
        opcion.val("1");
        select_dia.append(opcion);
    }
    if (opcion_seleccionada.attr("data-fecha-2") !== undefined) {
        var opcion = $("<option>");
        opcion.text("Día 2");
        opcion.val("2");
        select_dia.append(opcion);
    }
    if (opcion_seleccionada.attr("data-fecha-3") !== undefined) {
        var opcion = $("<option>");
        opcion.text("Día 3");
        opcion.val("3");
        select_dia.append(opcion);
    }

    select_dia.select2();
}

function evento_seleccionar_dia() {

    var dia = $(this).find("option:selected").val();
    var id_sangria = $("#seleccion-sangria").find("option:selected").val();

    $.ajax({
        url: "/App/Module/Model",
        type: "GET",
        data: {"accion": "caballossangriaajax", "dia": dia, "id_sangria": id_sangria},
        dataType: "json",
        success: function (datos) {
            agregar_muestra_caballos(datos);
        }
    });
}

function agregar_muestra_caballos(datos) {
    var lista_caballos = [];

    for (i = 0; i < datos.length; i++) {
        var elemento = datos[i];
        lista_caballos.push(elemento.numero);
    }

    agregarMuestra();
    $("#identificadores_" + (contador - 1)).select2("val", lista_caballos);
}

$(document).ready(function () {
    var tipo = $("#tipo-edicion").data("tipo");
    if (tipo === "sangria") {
        $("#seleccion-objeto").find("option[value=sangria]").prop("selected", true);
        $("#seleccion-objeto").select2();

        var select_sangria = $("#seleccion-sangria");
        select_sangria.select2();
        select_sangria.change(evento_seleccionar_sangria);

        var select_dia = $("#seleccion-dia");
        select_dia.select2();
        select_dia.change(evento_seleccionar_dia);
    }
});

Answer 1

我能想出的唯一解决方案就是改变这个：

function generar_select_sangria(datos) {

    $("#fila-select-sangria").show();

    var select_sangria = $("#seleccion-sangria");
    select_sangria.select2();

    select_sangria.change(evento_seleccionar_sangria);

    for (i = 0; i < datos.length; i++) {
        var elemento = datos[i];
        var opcion = $("<option>");
        opcion.val(elemento.id_sangria);
        opcion.text(elemento.identificador);
        opcion.data("indice", i);
        opcion.data("fecha-1", elemento.fecha_dia1);
        opcion.data("fecha-2", elemento.fecha_dia2);
        opcion.data("fecha-3", elemento.fecha_dia3);

        select_sangria.append(opcion);
    }
}

到此

function generar_select_sangria(datos) {

    $("#fila-select-sangria").show();

    var select_sangria = $("#seleccion-sangria");
    select_sangria.select2();

    select_sangria.change(evento_seleccionar_sangria);

    for (var i = 0; i < datos.length; i++) {
        var elemento = datos[i];
        var opcion = $("<option value=\""+ elemento.id_sangria + "\"" 
            + "data-fecha-1=\"" + elemento.fecha_dia1 +  "\"" 
            + "data-fecha-2=\"" + elemento.fecha_dia2 +  "\"" 
            + "data-fecha-3=\"" + elemento.fecha_dia3 +  "\"" 
            + ">");
        opcion.text(elemento.identificador);

        select_sangria.append(opcion);
    }
}

这引出了一个问题：为什么HTML呈现的数据属性不会被jQuery代码识别？