Question

我正在开发一个项目，我们正在尝试实现一个名为Footable的jQuery插件。它通过在jQuery选择的表上调用函数.footable（）来工作。当我试图调用这个函数时，我得到了一个类型错误：undefined不是函数。

我们也在这个项目中使用prototypejs，所以起初我认为问题是那个footable使用$。（）而不是jQuery。（），它就是。我进去并将$ [。（]更改为jQuery，希望它可以解决问题，但我仍然无法调用.footable（）。

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

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

提前致谢

更新1

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

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

在成功加载footable的环境中，返回带有footable类的对象。在我的环境中，我得到一个＆＃34; TypeError：undefined不是一个函数＆＃34;。

Answer 1

确保首先加载jquery，然后填充和$是jQuery的别名，所以它应该不是问题，你可以使用$（）或jQuery（）

基于你的问题，你应该使用$（）或jQuery（），而不是$。（）或jQuery。（）

Answer 2

我认为你因冲突而走上正轨。

这是一个展示问题的插件：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和Call 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 and prototype.js conflict, how to keep jQuery as $?）

(function($) {
    $('table').footable();
})(jQuery);

为什么FooTable不可调用？

2 个答案: