Odoo中XML调用JS函数失效求助：点击按钮无控制台输出

1. 检查publicWidget的选择器与事件绑定 #

• 确认widget的selector是否精准匹配到按钮所在容器或按钮本身，不能太宽泛或过窄。比如按钮在.o_attendance_portal_container容器内，selector要对应这个容器。
• 检查events对象的格式是否正确，必须遵循'事件类型 选择器'的结构，示例：

events: {
    'click .o_check_in_btn': '_onCheckInClicked',
    'click .o_check_out_btn': '_onCheckOutClicked',
},

• 若按钮为动态渲染，确保widget初始化时目标DOM已存在，或利用事件委托（events中的选择器基于widget根元素）。

2. 验证XML模板继承的正确性 #

• 确认继承的模板路径无误，hr_attendance_portal的主模板为hr_attendance_portal.hr_attendance_portal_template，继承示例：

<template id="hr_attendance_portal_inherit" inherit_id="hr_attendance_portal.hr_attendance_portal_template">
    <!-- 通过xpath精准定位按钮节点，避免覆盖原有结构 -->
    <xpath expr="//button[hasclass('o_check_in_btn')]" position="attributes">
        <attribute name="class">o_check_in_btn custom-btn</attribute>
    </xpath>
</template>

• 不要直接替换整个按钮节点，除非完全保留原按钮的class与结构，否则会破坏DOM匹配逻辑。

3. 确认JS模块的注册与依赖 #

• 检查JS文件是否正确继承publicWidget.Widget并完成注册，示例：

odoo.define('your_module.attendance_widget', function (require) {
    "use strict";

    const publicWidget = require('web.public.widget');

    const AttendanceWidget = publicWidget.Widget.extend({
        selector: '.o_attendance_portal_container',
        events: {
            'click .o_check_in_btn': '_onCheckInClicked',
            'click .o_check_out_btn': '_onCheckOutClicked',
        },

        init: function () {
            this._super.apply(this, arguments);
            console.log("Start ...");
        },

        _onCheckInClicked: function (ev) {
            ev.preventDefault(); // 阻止默认跳转/提交行为
            console.log("Check In clicked");
        },

        _onCheckOutClicked: function (ev) {
            ev.preventDefault();
            console.log("Check Out clicked");
        },
    });

    publicWidget.registry.AttendanceWidget = AttendanceWidget;

    return AttendanceWidget;
});

• 确保模块__manifest__.py中正确声明JS资源：

'data': [
    'views/templates.xml',
],
'assets': {
    'web.assets_frontend': [
        'your_module/static/src/js/attendance_widget.js',
    ],
},

4. 排查事件冲突或默认行为 #

• 原hr_attendance_portal按钮可能自带点击事件（如表单提交、页面跳转），需在自定义函数中先调用ev.preventDefault()或ev.stopPropagation()，避免默认行为中断自定义逻辑。
• 打开浏览器开发者工具（F12），在Elements面板检查按钮是否被禁用、隐藏，或存在其他优先级更高的事件监听。

5. 调试DOM匹配情况 #

• 在widget的start方法中添加调试代码，确认是否能匹配到目标按钮：

start: function () {
    this._super.apply(this, arguments);
    console.log("Check In button count:", this.$('.o_check_in_btn').length);
    console.log("Check Out button count:", this.$('.o_check_out_btn').length);
    return this._super.apply(this, arguments);
},

• 若输出长度为0，说明选择器未匹配到元素，需检查模板中按钮的class是否正确，或widget的selector是否覆盖了按钮所在容器。

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