javascript - jQuery slickgrid イベント

Question

に「ドリルイン/ドリルアウト」を実装しようとしていslickgrid gridます。私はこの例に基づいてそれを行っています: http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html

この例は当然うまく機能します。すべては、本文セクションjavascriptのページ内にあります。htmlコードを関数内の別のファイルに入れているので、これは何らかの形で正しい機能に影響を与えると思います。

これは私のコードです：

function loadDrillGrid(){

     var options = {
      editable: true,
      enableAddRow: true,
      enableCellNavigation: true,
      asyncEditorLoading: false
    };

    var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
      value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
      var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
      var idx = dataView.getIdxById(dataContext.id);
      if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
        if (dataContext._collapsed) {
          return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
        } else {
          return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
        }
      } else {
        return spacer + " <span class='toggle'></span>&nbsp;" + value;
      }
    };
    var data = [];
    var columns = [
      {id: "title", name: "Title", field: "title", width: 220, formatter: TaskNameFormatter, validator: requiredFieldValidator, cannotTriggerInsert: true},
      {id: "duration", name: "Duration", field: "duration", cannotTriggerInsert: true},
      {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, cannotTriggerInsert: true},
      {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, cannotTriggerInsert: true},
      {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, cannotTriggerInsert: true},
      {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80,  field: "effortDriven", cannotTriggerInsert: true}
    ];
    //$(function () {
    var indent = 0;
    var parents = [];
    var grid;   

      // prepare the data
      for (var i = 0; i < 10; i++) {
        var d = (data[i] = {});
        var parent = null;

        if (Math.random() > 0.8) {
          indent++;
          parent = i - 1;
          parents.push(parent);
        } else if (Math.random() < 0.3 && indent > 0) {
          indent--;
          parent = parents.pop();
        } else if (parents.length > 0) {
          parent = parents[parents.length - 1];
        }

        if (indent == 0) {
          parent = null;
        }

        d["id"] = "id_" + i;
        d["indent"] = indent;
        d["parent"] = parent;
        d["title"] = "Task " + i;
        d["duration"] = "5 days";
        d["percentComplete"] = Math.round(Math.random() * 100);
        d["start"] = "01/01/2009";
        d["finish"] = "01/05/2009";
        d["effortDriven"] = (i % 5 == 0);
      }

    //initialize dataview
     dataView = new Slick.Data.DataView({ inlineFilters: true });
       // initialize the model

      dataView.beginUpdate();
      dataView.setItems(data);
      dataView.endUpdate();
      // initialize the grid
      grid = new Slick.Grid('#view-per-member-table', dataView, columns, options);

    grid.onClick.subscribe(function (e, args) {
        if ($(e.target).hasClass("toggle")) {
          var item = dataView.getItem(args.row);
          if (item) {
            if (!item._collapsed) {
              item._collapsed = true;
            } else {
              item._collapsed = false;
            }

            dataView.updateItem(item.id, item);
          }
          e.stopImmediatePropagation();
        }
      });
    //})
    }

グリッドはサンプル データで正常に読み込まれますが、グリッドをクリックしたときだけでなく、ページが読み込まれるときに " grid.onClick.subscribe " イベントが発生し続けます (少なくともこれは、これの理論的な動作に関する私の理解です)。それは私に与えます：

Uncaught TypeError: Cannot call method 'subscribe' of null.

全くの初心者ですのでJS、jQuery何か参考になれば幸いです。乾杯。