JQuery事件处理依赖项选择/复选框(包括代码)

Question

我正在尝试动态创建依赖元素：2个选择和一个复选框。选择：字幕是在titulo之后创建的，取决于titulo的值复选框是在之后创建的，取决于子目录的值

每个元素都包含在自己的元素中，我在运行时在函数resultsTitulo、resultsSubtitolo、resultsPuntos上创建了这些元素。对于每一个，我检测它是否是第一次创建，以创建，如果不是，我保留但销毁元素结构（即$（"#titulo"）.replaceWith（''）；）并重新创建它。所有元素都包含在另一个名为"信息"（HTML文件）的主中

CCD_ 1初始化第一选择并检测所有元素的状态变化。

我遇到了以下问题：

1） 我希望能够根据元素的类型检测事件变化，即$("div.info").change(function () -> $("#titulo").change(function ()

然而，这是行不通的。

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); 
                        } 
                });
        }); 
    }); 
});

Answer 1

感谢Marcelo的快速回复，这让我思考了我在做什么。除了一件事：一旦创建并显示了复选框：

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

它们没有被消除和取代：

$("#checkbox").replaceWith('');

我该怎么做

这是我的新代码。首先，我重写了我的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); 
                        } 
                });
        }); 
    });     
});