Django模板引入外部.js文件后无法调用其中定义的JS函数如何解决？

问题原因 #

• 行内onclick事件只能调用**全局作用域（window对象下）**的函数，你在project_dashboard.js中定义的EnablePositionEdit函数默认属于JS文件的模块/局部作用域，没有挂载到全局，所以点击时无法找到。
• 你模板中按钮的onclick属性写法不规范，属性值没有用引号包裹，部分浏览器解析时可能出现异常。
• 你JS中table点击切换类的逻辑是通过jQuery事件委托实现，不需要依赖全局函数，只要JS加载成功就能正常执行，因此不会触发报错。

解决方案 #

方案1：函数挂载到全局（改造成本最低） #

修改project_dashboard.js中的函数定义，直接绑定到window对象：

$('table').on('click', 'tr.parent .fa-chevron-down', function(){
     $(this).closest('tbody').toggleClass('open');
});

// 将函数挂载到全局window对象
window.EnablePositionEdit = function(position_id) {
     const checked_events = []
     $("#edit_button_____" + position_id).toggle()
     $("#save_button_____" + position_id).toggle()
     $("#delete_____" + position_id).toggle()
     inputs = document.querySelectorAll(".availability_____" + position_id + " input")
     inputs.forEach(input => {
         input.removeAttribute("disabled")
     })
}

同时修正模板中onclick属性的写法，给属性值加双引号：

<button class="btn" style="font-size:10px; color: rgb(59, 89, 152);" onclick="EnablePositionEdit('{{ position.id }}')"> 
    <i class="fa fa-pencil"></i> 
</button>

修改后直接生效。

方案2：改用事件委托（更符合前端规范） #

抛弃行内onclick写法，通过事件委托绑定点击事件，避免全局变量污染：
第一步修改模板按钮代码，去掉onclick属性，新增类名和自定义属性存储position id：

<button class="btn js-edit-position-btn" style="font-size:10px; color: rgb(59, 89, 152);" data-position-id="{{ position.id }}"> 
    <i class="fa fa-pencil"></i> 
</button>

第二步在project_dashboard.js中新增事件委托逻辑：

$('table').on('click', 'tr.parent .fa-chevron-down', function(){
     $(this).closest('tbody').toggleClass('open');
});

// 新增编辑按钮点击委托事件
$(document).on('click', '.js-edit-position-btn', function() {
    const position_id = $(this).data('position-id')
    const checked_events = []
    $("#edit_button_____" + position_id).toggle()
    $("#save_button_____" + position_id).toggle()
    $("#delete_____" + position_id).toggle()
    inputs = document.querySelectorAll(".availability_____" + position_id + " input")
    inputs.forEach(input => {
        input.removeAttribute("disabled")
    })
})

这种方案可维护性更高，也不会出现作用域相关问题。 #

内容的提问来源于stack exchange，提问作者giaggi