はTypeError：$（...）gridstackは、機能＃709

Question

ではありません。これは、スクリプトの私の配列である。

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

Answer 1

あなたがDEVを使用しているので、あなたのjsからこれらのgridstack.min.jsを削除端に上の代わりに、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" 

をCSSを置きますそれのバージョン

でもそれがうまくいかなくてもこれを試してみてください

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