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建议将委派的事件移动到文档就绪函数。。并使用选择的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>

选择选项上的Jquery问题

1 个答案: