JQuery事件处理相关选项/复选框（包括代码）

我尝试动态创建依赖元素：2个选择和一个复选框。 选择：subtitulo是在之后创建的，取决于titulo的值 复选框是在之后创建的，并且取决于subtitulo的值

每个元素都包含在自己的元素中，我在运行时通过函数resultsTitulo、resultsubittulo、resultsPuntos创建了这些元素。对于每一个元素，我检测它是否是第一次创建的，要创建，如果不是，我保留但销毁元素结构，即$titulo.replaceWith；然后重新创建它。所有元素都包含在另一个名为info HTML文件的主文件中

$document.readyfunction初始化第一个select并检测所有元素状态的更改

我有以下问题：

1我希望能够根据元素类型检测事件更改，即$div.info.changefunction->$titulo.changefunction

然而，这是行不通的

2我希望能够添加内部结构，而不是内部结构

$("div.info").append("<div class=\"tituloD\">");
$("div.info").append("Titulo: "); -> $("div.titulo").append("Titulo: ");

这也不行

3我不知道复选框是否会被创建好

var tituloCreado = "No";
var subtituloCreado = "No";
var puntosCreados = "No";
var temp = 0;

// Esta funcion recoge el json data de titulos y lo imprime en pantalla
function resultsTitulo(data) { 
    $("div.info").html('').show(); 


    //Si el título no se ha creado antes, se crea la estructura
    if(tituloCreado == "No"){
        $("div.info").append("<div class=\"tituloD\">");
        $("div.info").append("Titulo: ");
        $("div.info").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.info").append("</select>"); 
        $("div.info").append("</div>");
        tituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#titulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.info").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.info").append("</select>");  
    }
    $("div.info").append("<br />");
    $("div.info").append("<br />");
} 



// Esta funcion recoge el json data de subtitulos y lo imprime en pantalla  
function resultsSubtitulo(data) { 

    //Si el subtítulo no se ha creado antes, se crea la estructura
    if(subtituloCreado == "No"){
        $("div.info").append("<div class=\"subtituloD\">");
        $("div.info").append("Subtitulo: ");
        $("div.info").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 
        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.info").append("</select>"); 
        $("div.info").append("</div>");
        subtituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#subtitulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.info").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 

        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.info").append("</select>");
    }

} 

// Esta funcion recoge el json data de puntos importantes y lo imprime en pantalla  
function resultsPuntos(data) { 
//$("div.info").append(""); 
    //Si el punto no se ha creado antes, se crea la estructura
    if(puntosCreados == "No"){
        $("div.info").append("<div class=\"puntosD\">");
        $("div.info").append("Puntos importantes: ");

        $.each(data,function(index,value) {
            $("div.info").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
        $("div.info").append("</div>");
        puntosCreados = "Si";
    }
    else{
        //Vaciar estructura
        $("#myCheckbox").replaceWith('');

        //Crear estructura de nuevo
        $.each(data,function(index,value) {
            $("div.info").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
    }
}



//INICIO
$(document).ready(function(){ 
    $.ajax({ 
        data: "", 
        type: "GET", 
        dataType: "json", 
        url: "recogeTitulo.php", 
        success: function(data){ 
            resultsTitulo(data); 
        }
    });

    $("div.info").change(function (){
        $("div.info option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogeSubtitulo.php", 
                        success: function(data){ 
                            resultsSubtitulo(data); 
                        } 
                });
        }); 
    }); 

});

---

谢谢马塞洛的快速回复，这让我想起了我在做什么。 除了一件事之外，此代码的所有功能都正常工作：一旦创建并显示复选框：

$.each(data,function(index,value) {
$("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);

我该怎么做

这是我的新代码。首先，我重写了我的HTML，用以下内容替换info div：

<div class="tituloD">
</div>
<div class="subtituloD">
</div>
<div class="puntosD">
</div>

并为javascript重写代码，希望现在我正确使用append

var tituloCreado = "No";
var subtituloCreado = "No";
var puntosCreados = "No";

// Esta funcion recoge el json data de titulos y lo imprime en pantalla
function resultsTitulo(data) { 
    $("div.tituloD").html('').show(); 


    //Si el título no se ha creado antes, se crea la estructura
    if(tituloCreado == "No"){
        $("div.tituloD").append("Titulo: ");
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>"); 
        tituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#titulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>");   
    }
    $("div.tituloD").append("<br />");
    $("div.tituloD").append("<br />");
} 



// Esta funcion recoge el json data de subtitulos y lo imprime en pantalla  
function resultsSubtitulo(data) { 

    //Si el subtítulo no se ha creado antes, se crea la estructura
    if(subtituloCreado == "No"){
        $("div.subtituloD").append("Subtitulo: ");
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 
        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>"); 
        subtituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#subtitulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 

        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>");
    }

} 

// Esta funcion recoge el json data de puntos importantes y lo imprime en pantalla  
function resultsPuntos(data) { 

    //Si el punto no se ha creado antes, se crea la estructura
    if(puntosCreados == "No"){
        $("div.puntosD").append("Puntos importantes: ");
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
        puntosCreados = "Si";
    }
    else{
        //Vaciar estructura
        $("#checkbox").replaceWith('');

        //Crear estructura de nuevo
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
    }
}



//INICIO
$(document).ready(function(){ 
    $.ajax({ 
        data: "", 
        type: "GET", 
        dataType: "json", 
        url: "recogeTitulo.php", 
        success: function(data){ 
            resultsTitulo(data); 
        }
    });

    //Eventhandler tituloD
    $("div.tituloD").change(function (){
        $("div.tituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogeSubtitulo.php", 
                        success: function(data){ 
                            resultsSubtitulo(data); 
                        } 
                });
        }); 
    }); 

    //Eventhandler subtituloD
    $("div.subtituloD").change(function (){
        $("div.subtituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogePuntos.php", 
                        success: function(data){ 
                            resultsPuntos(data); 
                        } 
                });
        }); 
    });     

});

---

代码中的一些问题：append不应该以这种方式工作。附加解析为dom元素的dom元素或字符串。$'somediv.append不起作用。有关正确用法，请参阅。另外，请澄清您对第2项的要求。您可能需要阅读有关布尔类型的更多信息。他们很有帮助。否则，请考虑接受自己的答案。

var tituloCreado = "No";
var subtituloCreado = "No";
var puntosCreados = "No";

// Esta funcion recoge el json data de titulos y lo imprime en pantalla
function resultsTitulo(data) { 
    $("div.tituloD").html('').show(); 


    //Si el título no se ha creado antes, se crea la estructura
    if(tituloCreado == "No"){
        $("div.tituloD").append("Titulo: ");
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>"); 
        tituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#titulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>");   
    }
    $("div.tituloD").append("<br />");
    $("div.tituloD").append("<br />");
} 



// Esta funcion recoge el json data de subtitulos y lo imprime en pantalla  
function resultsSubtitulo(data) { 

    //Si el subtítulo no se ha creado antes, se crea la estructura
    if(subtituloCreado == "No"){
        $("div.subtituloD").append("Subtitulo: ");
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 
        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>"); 
        subtituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#subtitulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 

        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>");
    }

} 

// Esta funcion recoge el json data de puntos importantes y lo imprime en pantalla  
function resultsPuntos(data) { 

    //Si el punto no se ha creado antes, se crea la estructura
    if(puntosCreados == "No"){
        $("div.puntosD").append("Puntos importantes: ");
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
        puntosCreados = "Si";
    }
    else{
        //Vaciar estructura
        $("#checkbox").replaceWith('');

        //Crear estructura de nuevo
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
    }
}



//INICIO
$(document).ready(function(){ 
    $.ajax({ 
        data: "", 
        type: "GET", 
        dataType: "json", 
        url: "recogeTitulo.php", 
        success: function(data){ 
            resultsTitulo(data); 
        }
    });

    //Eventhandler tituloD
    $("div.tituloD").change(function (){
        $("div.tituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogeSubtitulo.php", 
                        success: function(data){ 
                            resultsSubtitulo(data); 
                        } 
                });
        }); 
    }); 

    //Eventhandler subtituloD
    $("div.subtituloD").change(function (){
        $("div.subtituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogePuntos.php", 
                        success: function(data){ 
                            resultsPuntos(data); 
                        } 
                });
        }); 
    });     

});