x-editable(jQuery UI build)抛出Uncaught TypeError

时间:2015-07-23 16:59:13

标签: javascript jquery jquery-ui typeerror x-editable

请考虑以下代码:

在jQuery document.ready

$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
        send: 'never',
       success: function(response, newValue) {
        userModel.set('username', newValue); //update backbone model
       }
});

HTML:

<div class="editable">
     <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
</div>

这会引发未捕获的TypeError:this.tip(...)。find不是 jqueryui-editable.js中的函数:4727

我认为这是因为与jQuery UI版本不兼容。但是我怎么能绕过它?

更新:添加完整示例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
  <script>
    $(function() {
        $.fn.editable.defaults.mode = 'popup';
        $("#username").editable({
            send: 'never',
           success: function(response, newValue) {
            userModel.set('username', newValue); //update backbone model
        }
        });
      });
  </script>
</head>
<body>
    <div class="editable">
        <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

我认为这是jqueryui 1.11.4特有的源代码中的一个错误。 自2013年以来,它看起来并不像源代码的jquery版本,所以我认为它不会很快修复。不幸的是,这是我发现的功能最强的就地编辑库,所以我决心让它发挥作用。

一个不错的选择是使用完全不使用jqueryui的库的“普通”版本。在我看来,它在功能上是等同的。如果你想要“弹出”而不是“内联”模式,你还需要抓住并包含poshytip

答案 1 :(得分:0)

我遇到了同样的错误,但是使用旧版本的jquery-ui解决了这个问题。我在v 1.12.0上,但注意到可编辑的演示使用了1.10.1。使用1.10.1版本的jquery-ui允许我使用editable。

我正在使用

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js