0

我创建了一个简单的 javascript 文件并将其放在 web-app/js 中并将其命名为 util.js

它包含以下代码：

$(document).ready(function() {

    // adds a space after 3rd digit/letter of postal code
    $('#postalCode').keyup(function() {
        var postalCodeValue = this.value;
        var postalCodeLength = postalCodeValue.length;

        if(postalCodeLength == 3){
            this.value = postalCodeValue + " ";
        }
    });
});

这是非常简单的代码，我将它附加在 main.gsp 上，这样我就不必每次都继续导入它。

...
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;" /></div>
    <g:javascript library="application" />
    <g:javascript library="util" />
    <r:layoutResources />
...

现在，有两种形式使用它（Form1 和 Form2）。它们属于不同的 gsp 文件。Form1 和 Form2 都有一个具有相同 ID“#postalCode”的文本字段。

<g:textField name="postalCode" maxlength="7" id="postalCode" pattern="([A-Z]|[a-z])[0-9]([A-Z]|[a-z]) [0-9]([A-Z]|[a-z])[0-9]" required="" value="${fosterHomeInstance?.postalCode}"/>

问题是，util.js 适用于 Form1，但奇怪的是，它不适用于 Form2。鉴于它们具有相同的 id，并将代码<g:javascript library="util" />放在 main.gsp 中，那么理论上它们应该可以正常工作吗？嗯..这很奇怪。我右键Form2查看源码，util.js肯定有。我真的想不出它不应该起作用的原因。我希望它适用于两种形式，因为我不想重新重写相同的代码。

PS：我尝试将 id 更改为 class = "postalCode" 并将 $('#postalCode')... 更改为 $('.postalCode') 但仍然无效。我还在邮政编码文本字段上添加了一个 onClick 触发器，单击时会出现警报（其代码来自 util.js），以测试是否正在读取 util.js，它有效，但仍然无法解决问题。我很困惑。我可以简单地将它重写为 onKeyUp 并添加一个旧 javascript 时尚的函数，但我可能在这里遗漏了一些东西，所以我想先听听你们的意见。:'(

4

1 回答 1

0

我建议在整个主要 JavaScript 函数的位置添加 console.log("Descriptive text") 以进行调试。这将让您在 JavaScript 停止工作之前了解您对 JavaScript 的了解程度。很可能某些 JavaScript 正在按您的预期执行，但其他部分则没有。例如，

$(document).ready(function() {
console.log("Document is ready");
  $('#postalCode').keyup(function(){
    console.log("Keyup function started.");
    var postalCodeValue = this.value;
    var postalCodeLength = postalCodeValue.length;
    console.log("Postal Code Value is: " + postalCodeValue);
    console.log("Postal Code Length is: " + postalCodeLength);

    if(postalCodeLength == 3){
        console.log("The postal code length is exactly 3.");
        this.value = postalCodeValue + " "
    }
}); });

值得注意的是，Internet Explorer 默认情况下没有打开控制台，因此您需要在发布站点以供公众使用之前删除这些行，或者检查浏览器并将控制台定义为其他内容（如果浏览器是 IE）。

您可以使用 CTRL+SHIFT+J 在 Chrome 中打开 JS 控制台。有关打开它的其他方法，请参阅https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers 。

于 2013-03-20T03:40:20.520 回答