单击时出现“对象没有方法”错误的 KendoUI Mobile 链接答案

【问题标题】：KendoUI Mobile link giving "Object has no method" error when clicked单击时出现“对象没有方法”错误的 KendoUI Mobile 链接
【发布时间】：2013-05-07 18:08:44
【问题描述】：

我遇到了一个奇怪的错误。

我在我的 Kendo Mobile 应用程序中使用了 Thomas j Bradley 的出色签名板。

总的来说，我对 KendoUI 和 HTML5 还很陌生，所以也许我忽略了一些东西，但问题出在这里......

我有以下链接：

<a href="signaturepad.html" data-role="button" class="details-link">Parcel Delivered</a>

然而，当我点击链接时，它给了我“Uncaught TypeError: Object [object Object] has no method 'signaturePad'”错误。

这是我的 signaturepad.html 页面，谁能看看我在 signaturepad.html 页面中忽略了什么？？

<body>
<div id="signaturePad" data-role="view" data-layout="default" align="center">
    <form method="post" action="" class="sigPad">
        <label for="name">Print your name</label>
        <input type="text" name="name" id="name"/>
        <p class="typeItDesc">Review your signature</p>
        <p class="drawItDesc">Draw your signature</p>
        <ul class="sigNav">
            <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
            <li class="drawIt"><a href="#draw-it">Draw It</a></li>
            <li class="clearButton"><a href="#clear">Clear</a></li>
        </ul>
        <div class="sig sigWrapper">
            <div class="typed"></div>
            <canvas class="pad" width="198" height="55"></canvas>
            <input type="hidden" name="output" class="output" />
        </div>
        <button type="submit">I accept delivery of this parcel.</button>
    </form>
</div>
<script src="js/kendo.all.min.js"></script>
<script>
    $(document).ready(function () {
        $('.sigPad').signaturePad();
    });
</script>

如果我手动导航到 signaturepad.html，它会显示但不显示 KendoUI 样式。

我已将这些类添加到“kendo.mobile.all.min.css”文件中。

任何帮助将不胜感激！！！

【问题讨论】：

标签： html kendo-ui kendo-mobile

【解决方案1】：

您不必在 signaturepad.html 中再次添加 Kendo 参考文件，因为该 html 文件将使用 ajax 加载到父视图中。还有 $('.sigPad').signaturePad();需要在视图的 data-init 方法中调用，而不是在 document.ready 事件中调用。永远记住，Kendo Mobile 应用程序是单页应用程序，应用程序内部不应发生回发。所以你不应该在移动应用程序中使用表单发布......你应该使用调用你的服务方法使用 ajax 将数据发送到服务器。在这种情况下，您可以通过 ajax 将签名图像作为数据发送到服务器。

像这样更改您的代码：

div id="signaturePad" data-init="initView" data-role="view" data-layout="default" align="center">
    <form method="post" action="" class="sigPad">
        <label for="name">Print your name</label>
        <input type="text" name="name" id="name"/>
        <p class="typeItDesc">Review your signature</p>
        <p class="drawItDesc">Draw your signature</p>
        <ul class="sigNav">
            <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
            <li class="drawIt"><a href="#draw-it">Draw It</a></li>
            <li class="clearButton"><a href="#clear">Clear</a></li>
        </ul>
        <div class="sig sigWrapper">
            <div class="typed"></div>
            <canvas class="pad" width="198" height="55"></canvas>
            <input type="hidden" name="output" class="output" />
        </div>
        <button type="submit">I accept delivery of this parcel.</button>
    </form>
</div>

<script>
function initView(e){
        $('.sigPad').signaturePad();
}

</script>

【讨论】：