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

Question

我在 Grails 项目中有一个模板，在该项目中，我对出现在模板中的按钮具有点击功能。我注意到，如果我将此点击功能代码 (jQuery) 与模板的标记代码内联包含在“脚本”标签内，当然它会起作用，但只要我将点击功能代码移动到外部文件并尝试包含该文件在模板中由

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

那么点击功能就不起作用了。我想知道这是为什么。更神秘的是，外部文件中的某些 javascript 确实有效。

这是点击功能的代码(实际上这是我尝试使用的整个外部文件):

$(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 按钮位于模板上，'#AdminConsole p' 是主 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);
    });
});