如何处理DOM个元素？

Question

我正在学习如何为我的 Odoo 10 插件编写自定义 JavaScript。

我写了下面这段代码：

odoo.define('ioio.io', function(require) {
  'use strict'

  const e = $('div.o_sub_menu_footer')
  console.log('--testing--'.repeat(7))
  console.log(e)

  // the "Powered by Odoo" down the secondary menu
  e.remove()
})

代码加载良好，我可以在控制台中看到我的测试字符串。
但是，当此代码在目标 div 之前加载时，因此 e empty/not 尚未填充，因此其内容不会被删除。
从控制台手动执行此操作。

我的问题是这样做的正确方法是什么？以及如何准确知道代码何时执行？

Answer 1

将您的脚本放在 <body> 标记的底部，以确保 DOM 在尝试操作它之前呈现。

Answer 2

你可以

将您的 html 代码放在文件中的脚本标记之前
使用 jQuery $(document).ready(...);

Answer 3

这是一个 Odoo 特定问题，因此您应该使用 Odoo 标准方式，即通过其 base JS class。 class 包含一个 ready() 方法，它可以满足您的需求。

在您的情况下，要使用该功能，您需要首先要求 class。然后你可以使用ready()。

正在更新您的代码，它应该如下所示：

odoo.define('ioio.io', function(require) {
  'use strict'

  // require base class
  var base = require('web_editor.base');

  //use its ready method
  base.ready().done(function () {

  // put all the code you want to get loaded 
  // once the DOM is loaded within this block

  const e = $('div.o_sub_menu_footer')
  console.log('--testing--'.repeat(7))
  console.log(e)

  // the "Powered by Odoo" down the secondary menu
  e.remove()
  });
})

虽然您接受的答案会导致相同的结果，但您可能希望将其更新为这个答案，因为这是 Odoo 的方式。通常建议尽可能在 Odoo 框架内工作，只有在真正需要时才进行自定义。（尽管由于 Odoo 的文档很差，很难了解 Odoo 已经提供了哪些功能。）

如何处理DOM个元素？

How to deal with DOM elements?

javascript

openerp

odoo-9

odoo-10