TypeError: $(...).gridstack 不是函数 #709

Posted 2023-02-19

【中文标题】TypeError: $(...).gridstack 不是函数 #709

【英文标题】：TypeError: $(...).gridstack is not a function #709

【发布时间】：2017-12-13 20:08:16

【问题描述】：

这是我的脚本序列：

src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"
src="../dist/gridstack.js"
src="gridstack.js"
src="../dist/gridstack.min.js"
href="../dist/gridstack.css"
href="../dist/gridstack.min.css"

这是我使用 gridstack 函数的 javascript 代码，但它显示错误。请检查脚本和 JavaScript 文件的顺序。

    $(function () 
 alert("1");
    $('.grid-stack').gridstack(
        animate: true,
        auto: true,
        width: 12,
        float: true,
        vertical_margin: 0,
        always_show_resize_handle: /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: 
            handles: 'e, se, s, sw, w'
           
    );

    $('.grid-stack-placeholder').remove();

    this.grid = $('.grid-stack').data('gridstack');

    this.add_widget = function()
     alert("OK");

        var id = getRandomInt(1111,9999);

        var el = $.parsehtml("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
        this.grid.add_widget(el, 0, 0, 6, 5, true);

        $('.grid-stack-item-content[data-id="'+id+'"]').append('<span class="fa fa-times remove-widget"> </span><span class="fa fa-pencil select-use"></span>  </span><span class="fa fa-plus add-nested-widget-box"></span> ');

    .bind(this);

    this.clear_grid = function () 
        this.grid.remove_all();
    .bind(this);

    $('.clear-customization, .customize-pages-list li').click(this.clear_grid); 
    $('.add-widget-box').click(this.add_widget);

);

$('body').on('click', '.remove-widget', function()

    var grid = $('.grid-stack').data('gridstack');

    grid.remove_widget($(this).parents().eq(1));

);


function getRandomInt(min, max) 
    return Math.floor(Math.random() * (max - min + 1)) + min;

【问题讨论】：

是的，更多的代码会有所帮助

在序列顶部使用 jquery.min.js

用在上面但同样的问题。

你要添加多少时间 gridstack mann 要么删除 min 文件，要么删除生产文件

@RAHULSR 现在检查 qus

【参考方案1】：

把css放在上面而不是js文件

 href="../dist/gridstack.css"

最后

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"
src="../dist/gridstack.js"

从你的 js 中删除那些 gridstack.min.js，因为你使用的是它的开发版本

即使这不起作用，也试试这个

<script>
$.noConflict();


  $('.grid-stack').gridstack(
        animate: true,
        auto: true,
        width: 12,
        float: true,
        vertical_margin: 0,
        always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: 
            handles: 'e, se, s, sw, w'
           
    );

【讨论】：

TypeError: $(...).gridstack is not a function $('.grid-stack').gridstack( demo.js (line 3, col 1)

gridstack 正在使用任何 js 文件进行分类我建议您重新删除除 jquery 和 grid tsack 之外的所有 js 文件，然后再次运行它，如果可行，请尝试逐个添加 js 文件并尝试知道哪个 js造成了麻烦