未捕获的类型错误：无法读取未定义的属性“val”（ui-nestable.min.js）答案

【问题标题】：Uncaught TypeError: Cannot read property 'val' of undefined (ui-nestable.min.js)未捕获的类型错误：无法读取未定义的属性“val”（ui-nestable.min.js）
【发布时间】：2017-10-15 15:30:12
【问题描述】：

我遇到了一个小问题。当我右键单击该页面并在 Google Chrome 中按检查（页面的源代码）时，我收到以下错误。这个文件 (ui-nestable.min.js) 是我的页面正常工作所必需的，它有趣的一面是我的页面正常工作。我在互联网上进行了研究，但没有找到此错误的任何结果。

Error Image

ui-nestable.min-js 代码：

var UINestable = function () {

var updateOutput = function (e) {
    var list = e.length ? e : $(e.target),
        output = list.data('output');
    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
    } else {
        output.val('JSON browser support required for this demo.');
    }
};


return {
    //main function to initiate the module
    init: function () {

        // activate Nestable for list 1
        $('#nestable_list_1').nestable({
            group: 1
        })
            .on('change', updateOutput);

        // activate Nestable for list 2
        $('#nestable_list_2').nestable({
            group: 1
        })
            .on('change', updateOutput);

        // output initial serialised data
        updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));
        updateOutput($('#nestable_list_2').data('output', $('#nestable_list_2_output')));

        $('#nestable_list_menu').on('click', function (e) {
            var target = $(e.target),
                action = target.data('action');
            if (action === 'expand-all') {
                $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
                $('.dd').nestable('collapseAll');
            }
        });

        $('#nestable_list_3').nestable();

    }

};

}();

jQuery(document).ready(function() {    
   UINestable.init();
});

【问题讨论】：

这一行` output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2))` 没有找到数据所以它是null

标签： javascript jquery asp.net model-view-controller

【解决方案1】：

您没有在页面中使用所有可嵌套列表。您必须删除所有额外的代码。像这样

var UINestable = function () {

        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target),
                output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            } else {
                output.val('JSON browser support required for this demo.');
            }
        };

        return {
            //main function to initiate the module
            init: function () {

                // activate Nestable for list 1
                $('#nestable_list_1').nestable({
                    group: 1
                }).on('change', updateOutput);

                // output initial serialised data
                updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));

                $('#nestable_list_menu').on('click', function (e) {
                    var target = $(e.target),
                        action = target.data('action');
                    if (action === 'expand-all') {
                        $('.dd').nestable('expandAll');
                    }
                    if (action === 'collapse-all') {
                        $('.dd').nestable('collapseAll');
                    }
                });
            }
        };
    }();
    jQuery(document).ready(function() {    
       UINestable.init();
    });

【讨论】：