Question

我在Grails项目中有一个模板，其中我在模板中出现的按钮上有一个单击功能。我注意到，如果我将这个点击功能代码（jQuery）与模板内部的标记代码内嵌在一起，那就是＆＃39;脚本＆＃39;标签，当然，它工作，但只要我将点击功能代码移动到外部文件并尝试通过

将该文件包含在模板中

<g:javascript src="externalFile.js" />

然后点击功能不起作用。我想知道为什么会这样。更神秘的是外部文件中的一些javascript确实有效。

以下是click函数的代码（实际上这是我尝试使用的整个外部文件）：

$(document).ready(function() {

    $(function() {
        $( "#tabs" ).tabs();
    });

    $("#search").click( function() {
        $('#AdminConsole p').css("font-size", "30px");
        $("#AdminConsole p").html("Individuals Search Screen Results " + "<br />" + "Batch ID " + selectedBatchID + ": " + selectedBatchDesc);
    });

});

#search按钮位于模板上，＆＃39; #AdminConsole p＆＃39;是主要gsp上的文本标签，在模板甚至在页面稍后加载之前已经存在。

Answer 1

当代码移动到外部文件时，您需要放入ready handler内以确保在DOM准备好之前它不会执行

$(function() {
    $("#search").click( function() {
        $('#AdminConsole p').css("font-size", "30px");
        $("#AdminConsole p").html("Individuals Search Screen Results " + "<br />" + "Batch ID " + selectedBatchID + ": " + selectedBatchDesc);
    });
});

Answer 2

如评论中所述，标签功能可以从外部文件中运行，因此该文件正常运行。我会查看呈现页面的来源，以确保在最终页面上只有一个元素为 search 的元素被发送回浏览器。

另外我建议添加以下用于调试的click函数。

console.log("Click Fired")

如果点击没有被正确调用，或者你在函数中所做的工作没有正确发生，你应该能够缩小范围。

Grails模板内联javascript与外部文件javascript

2 个答案: