0

我正在做一个项目，我们正在尝试实现一个名为 Footable 的 jQuery 插件。它通过在 jQuery 选择的表上调用函数 .footable() 来工作。当我试图调用这个函数时，我得到了一个类型错误：undefined is not a function。

我们也在这个项目中使用了prototypejs，所以起初我认为问题在于footable使用的是$.()而不是jQuery.()，而且确实如此。我进去并将 $[.(] 更改为 jQuery，希望它能解决问题，但我仍然无法调用 .footable()。

您还应该知道我正在从 Iframe 加载 footble.js。我不确定这是否会导致任何问题。

我不确定下一步该尝试什么。任何建议表示赞赏。

提前致谢

更新 1

我尝试在控制台中输入以下代码

var $j = jQuery.noConflict();
$j('<table></table>').footable();

在成功加载footable 的环境中，将返回一个带有footable 类的对象。在我的环境中，我得到一个“TypeError：undefined is not a function”。

4

2 回答 2

0

确保首先加载 jquery，然后是footable，并且 $ 是 jQuery 的别名，所以它应该不是问题，你可以使用 $() 或 jQuery()

根据您的问题，您应该使用 $() 或 jQuery()，而不是 $.() 或 jQuery.()

于 2014-06-27T13:33:53.607 回答
0

我认为你在正确的轨道上存在冲突。

这是一个演示该问题的 plunk：http: //plnkr.co/edit/2sR7F2W0QGJAcXxgez14

在 plunk 中，如果 JQuery 仍然被 $ 引用并且您添加对 Prototype 的引用，您会看到 Footable 停止工作。如果您使用 JQuery NoConflict 然后使用它而不是 $，Footable 将再次按预期开始工作。

这是我定义脚本的地方：

  <head>
    <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="footable.core.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <script>var $j = jQuery.noConflict();</script>
    <script src="footable.js"></script>
    <script src="footable.filter.js"></script>
    <script data-require="prototype@*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>

然后当我使用 JQuery 并调用 footable() 时：

$j(function() {
  window.footable.options.filter.filterFunction = function(index) {
    var $t = $j(this),
      $table = $t.parents('table:first'),
      filter = $table.data('current-filter').toUpperCase(),
      columns = $t.find('td');

    var regEx = new RegExp("\\b" + filter + "\\b");
    var result = false;
    for (i = 0; i < columns.length; i++) {
      var text = $j(columns[i]).text();
      result = regEx.test(text.toUpperCase());
      if (result === true)
        break;


      if (!$table.data('filter-text-only')) {
        text = $j(columns[i]).data("value");
        if (text)
          result = regEx.test(text.toString().toUpperCase());
      }

      if (result === true)
        break;
    }

    return result;
  };

  $j('table').footable().bind('footable_filtering', function(e) {
    var selected = $j('.filter-status').find(':selected').text();
    if (selected && selected.length > 0) {
      e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
      e.clear = !e.filter;
    }
  });
}

如果你想继续使用 $ jquery 你可以这样做：（jQuery和prototype.js冲突，如何保持jQuery为$？）

(function($) {
    $('table').footable();
})(jQuery);
于 2014-06-30T20:00:22.170 回答