RadioButtons只在DataTable的第一个表中附加了一个事件

Question

我已经在这个问题上搜索了几天的解决方案，到目前为止还没有运气。

我有三个表使用java servlet填充，其中DataTables包含在两个Bootstrap Modal中，其中我有Radio Buttons来启用或禁用使用Jquery和javascript编辑/删除的行但由于某些原因只有第一页中的radiobuttons有这个事件，而在不同页面的其他人什么都不做。

这是我的jsp代码：

<%@ page pageEncoding="UTF-8" %>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Front-End (Servlet)</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="registro.jsp">Registro</a></li>
            <li><a href="consulta.jsp">Consulta</a></li>
        </ul>
    </div>
</div>
</nav>

header.jspf中

<%-- any content can be specified here e.g.: --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page pageEncoding="UTF-8" %>
<tbody>
<c:forEach items="${alumnos}" var="item">
    <tr>
        <td>${item.nombre}</td>
        <td>${item.ap_pat}</td>
        <td>${item.ap_mat}</td>
        <td>
            <c:choose>
                <c:when test="${item.carrera == 1}">
                    <p>SISTEMAS COMPUTACIONALES</p>
                </c:when>
                <c:when test="${item.carrera == 2}">
                    <p>QUIMICA</p>
                </c:when>
                <c:when test="${item.carrera == 3}">
                    <p>MECATRONICA</p>
                </c:when>
                <c:when test="${item.carrera == 4}">
                    <p>ELECTRONICA</p>
                </c:when>
                <c:when test="${item.carrera == 5}">
                    <p>ELECTROMECANICA</p>
                </c:when>
                <c:when test="${item.carrera == 6}">
                    <p>INDUSTRIAL</p>
                </c:when>
                <c:when test="${item.carrera == 7}">
                    <p>LOGISTICA</p>
                </c:when>
                <c:when test="${item.carrera == 8}">
                    <p>GESTION EMPRESARIAL</p>
                </c:when>
                <c:when test="${item.carrera == 9}">
                    <p>TICS</p>
                </c:when>
                <c:when test="${item.carrera == 10}">
                    <p>MAESTRIA EN CIENCIAS DE LA INGENIERIA</p>
                </c:when>
                <c:when test="${item.carrera == 11}">
                    <p>MAESTRIA EN CIENCIAS DE LA INGENIERIA AMBIENTAL</p>
                </c:when>
                <c:when test="${item.carrera == 12}">
                    <p>DOCTORADO EN CIENCIAS AMBIENTALES</p>
                </c:when>
            </c:choose>
        </td>
        <td>
            <c:if test="${item.genero}">
                <p>Hombre</p>
            </c:if>
            <c:if test="${!item.genero}">
                <p>Mujer</p>
            </c:if>
        </td>
    </tr>
</c:forEach>
</tbody>

tabla.jspf

<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="UTF-8" %>
<div id="Editar" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Editar</h4>
        </div>
        <div class="modal-body">
            <p>¿Cuál es la tabla a modificar?</p>
            <form id="alu">
                <table id="TablaEdit" class="table table-condensed display">
                    <thead>
                        <tr>
                            <td><b>Opcion</b></td>
                            <td><b>Nombre</b></td>
                            <td><b>Apellido Paterno</b></td>
                            <td><b>Apellido Materno</b></td>
                            <td><b>Carrera</b></td>
                            <td><b>Genero</b></td>
                            <td><b>Boton</b></td>
                        </tr>
                    </thead>
                    <%@ include file="/WEB-INF/jspf/tablaMod.jspf" %>

                </table>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove"></span>  Cancelar
            </button>
        </div>
    </div>
    <div class="loader">
    </div>
</div>
</div>

modalmod.jspf

<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="UTF-8" %>
<div id="Eliminar" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Eliminar</h4>
        </div>
        <div class="modal-body">
            <p>¿Cuál es la tabla a eliminar?</p>
            <form name="eliAlumno" id="eliAlumno" method="POST" action="DelAlumno">
                <table id="TablaElim" class="table table-condensed display">
                    <thead>
                        <tr>
                            <td><b>Opcion</b></td>
                            <td><b>Nombre</b></td>
                            <td><b>Apellido Paterno</b></td>
                            <td><b>Apellido Materno</b></td>
                            <td><b>Carrera</b></td>
                            <td><b>Genero</b></td>
                            <td><b>Boton</b></td>
                        </tr>
                    </thead>
                    <%@ include file="/WEB-INF/jspf/tablaEli.jspf" %>
                </table>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove"></span>  Cancelar
            </button>
        </div>
        <div class="loader">
        </div>
    </div>
</div>
</div>

modaleli.jspf

$(document).ready(function () {
var lang = {
    "sProcessing": "Procesando...",
    "sLengthMenu": "Mostrar _MENU_ registros",
    "sZeroRecords": "No se encontraron resultados",
    "sEmptyTable": "Ningún dato disponible en esta tabla",
    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix": "",
    "sSearch": "Buscar:",
    "sUrl": "",
    "sInfoThousands": ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst": "Primero",
        "sLast": "Último",
        "sNext": "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
};
$(".dep").attr('disabled', 'disabled');
$('#TablaAlumno').DataTable({
    "language": lang
});
$('#TablaElim').DataTable({
    "language": lang
});
$.fn.dataTableExt.ofnSearch['html-input'] = function (value) {
    return $(value).val();
};

var table = $("#TablaEdit").DataTable({
    columnDefs: [
        {"type": "html-input", "targets": [1, 2, 3]}
    ],
    "Language": lang
});

$("#TablaEdit td input").on('change', function () {
    var $td = $(this).parent();
    $td.find('input').attr('value', this.value);
    table.cell($td).invalidate().draw();
});
$("#TablaEdit td select").on('change', function () {
    var $td = $(this).parent();
    var value = this.value;
    $td.find('option').each(function (i, o) {
        $(o).removeAttr('selected');
        if ($(o).val() === value)
            $(o).attr('selected', true);
    });
    table.cell($td).invalidate().draw();
});

$("#alumno").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[2].style.display = "block";
    setTimeout(receive, 3000);

    function receive() {
        document.getElementsByClassName("loader")[2].style.display = "none";
        location.reload();
    }
});

var check = 0;
function ar() {
    $(".radioButton").each(function (index) {
        if ($(this).is(":checked")) {
            check = parseInt($(this).val());
        }
    });
}
;

var checkDel = 0;
function arDel() {
    $(".radioButtonEli").each(function (index) {
        if ($(this).is(":checked")) {
            checkDel = parseInt($(this).val());
        }
    });
}
;

$(".radioButton").change(function () {
    $(".dep").attr('disabled', 'disabled');
    ar();
    $("input[name='nombre" + check + ".0']").removeAttr('disabled');
    $("input[name='ap_pat" + check + ".0']").removeAttr('disabled');
    $("input[name='ap_mat" + check + ".0']").removeAttr('disabled');
    $("select[name='carrera" + check + ".0']").removeAttr('disabled');
    $("select[name='genero" + check + ".0']").removeAttr('disabled');
    $("input[name='submit" + check + ".0']").removeAttr('disabled');
});

$(".radioButtonEli").change(function () {
    $(".dep").attr('disabled', 'disabled');
    arDel();
    $("input[name='eli" + checkDel + ".0']").removeAttr('disabled');
});

$("#alu").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[0].style.display = "block";
    setTimeout(modify, 3000);

    function modify() {
        document.getElementsByClassName("loader")[0].style.display = "none";
        $.ajax({
            url: "ModAlumno",
            data: $("#alu").serialize(),
            type: "POST"
        })
                .done(function (json) {
                    bootbox.alert({
                        size: "small",
                        title: "Exito",
                        message: "El alumno ha sido modificado adecuadamente."
                    });
                    location.reload();
                })
                .fail(function (xhr, status, errorThrown) {
                    bootbox.alert({
                        size: "large",
                        title: "Error",
                        message: "El alumno no se modifico adecuadamente\n\
información del error: <br>" + errorThrown
                    });
                });
    }
});
$("#eliAlumno").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[1].style.display = "block";
    setTimeout(del, 3000);

    function del() {
        document.getElementsByClassName("loader")[1].style.display = "none";
        $.ajax({
            url: "DelAlumno",
            data: $("#eliAlumno").serialize(),
            type: "POST"
        })
                .done(function (json) {
                    bootbox.alert({
                        size: "small",
                        title: "Exito",
                        message: "El alumno ha sido eliminado adecuadamente."
                    });
                    location.reload();
                })
                .fail(function (xhr, status, errorThrown) {
                    bootbox.alert({
                        size: "large",
                        title: "Error",
                        message: "El alumno no se eliminó adecuadamente\n\
información del error: <br>" + errorThrown
                    });
                });
    }
});
});

consultascript.js

import pandas as pd

df = pd.read_excel('Test.xlsx')
writer = pd.ExcelWriter('Test.xlsx')
df = pd.DataFrame(
    {"Name" :['A' ,'B', 'C', 'D', 'E', 'F'],
     "Value" :[1 ,2 ,3 ,4 ,5 ,6]},
    )
df.to_excel(writer,'Main_sheet')
value = df.loc[lambda df: df.Name == 'D',:]
p = value.Value + 50
print(value)
print(p)
df.set_value(value.index, 'Name', 10)

writer.save()

编辑：似乎每个页面都有另一组RadioButton，它们与其他页面不相同但没有事件

Answer 1

从事物的角度来看，发生的事情是你的事件不受动态元素的束缚。您需要将yoru事件绑定到始终存在的元素。尝试绑定您的事件，如下所示：

$(document).on('event','.radiobuttonclass', function(e){
   //code for event here.
});