选择选项上的jQuery问题

Question

需要有关jquery脚本的帮助。 我有一个从Ajax触发的选择，其中列出了可用的选项。 一旦用户单击此选项，如果变量为1，则会添加HTML div，如果我更改为另一个值，则HTML消失。 第一次也可以正常运行该脚本：单击一个选项并显示div，当我单击其他选项时消失，但是如果再次选择该选项，则此循环完成，此操作停止...这是代码：

<script type="text/javascript">
$(document).ready(function() { 
        request_url = 'opzioni-select';
    $.ajax({
        url: request_url,
        success: function(data){
            $('#id_opzione').html("");
            $.each(data, function(i, item){
                var id = item.id;
                var parent_id = item.parent;
                var nome_opzione = item.nome_opzione;
                var nome_parent = item.nome_parent;
                $('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');

            });
            $(document).on('change', '.opzione', function(){
                    var parent = $('#id_opzione').find(':selected').data('parent');
                    var nome_parent = $('#id_opzione').find(':selected').data('opzione');
                    if(parent != null) {
                        $('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
                    } else {
                        $('#parent-div').hide('fast');
                    }

                });
        }
    });

});
</script>

我试图在类中更改div id并切换为“ on（'change”，而不是直接使用.change（调用#div，但是什么也没有。

Answer 1

几个问题-您要附加一堆选项-然后委派一个我看不见正​​在创建的类。Id建议将委托事件移至文档就绪函数。 。 并使用select-的ID，然后使用this选择选项。

<script type="text/javascript">
$(document).ready(function() { 
        request_url = 'opzioni-select';
    $.ajax({
        url: request_url,
        success: function(data){
            $('#id_opzione').html("");
            $.each(data, function(i, item){
                var id = item.id;
                var parent_id = item.parent;
                var nome_opzione = item.nome_opzione;
                var nome_parent = item.nome_parent;
                $('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');

            });

    });
    $('#id_opzione').on('change', function(){
                  alert('Changed');
                    var parent = $('#id_opzione').find(':selected').data('parent');
                    var nome_parent = $('#id_opzione').find(':selected').data('opzione');
                    if(parent != null) {
                        $('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
                    } else {
                        $('#parent-div').hide('fast');
                    }

                });
        }
});
</script>