Question

我只是想在管理后端中获取元素的顶部，左侧等位置...

function my_backend_assets() {
    wp_enqueue_script(
        'my-editor-js',
        plugins_url( '/src/editor.js', dirname( __FILE__ ) ),
        array( 'jquery' ),
        filemtime( plugin_dir_path( __FILE__ ) . '/src/editor.js' )
    );
}
add_action( 'admin_enqueue_scripts', 'my_backend_assets', 99999 );

还有我的js

$( document ).load(function() {

  var $test = $(".my-div").offset();

  console.log( $test.top );

});

我得到Uncaught TypeError: Cannot read property 'left' of undefined

元素my-div存在。我可以记录下来。脚本在后端加载。 jQuery的工作原理...我不明白为什么我无法获得元素的offest（）。

更多详细信息：

我正在将我的自定义js加载到Wordpress编辑页面中（创建页面时）

我正在尝试获取编辑器页面内任何UI元素的偏移量。例如，编辑器文本区域。它没有返回任何东西。只有具有超时功能，它才能起作用。

我正在使用具有古腾堡（Gutenberg）编辑器的最新Wordpress。

Answer 1

Cannot read property 'left' of undefined必然意味着$(".my-div").offset()返回undefined。

$(".my-div")可能与元素正在执行时不匹配 ...

现在，它的为什么部分取决于它！您说可以正常登录。我假设这意味着您能够在浏览器中打开开发人员工具，并通过将相同的代码放入控制台来获得结果。

可能的故障排除策略：

在setTimeout()内部的回调函数周围加上$(document).load，并在之后 5s运行它。这是一个骇人的解决方法，可以帮助您了解在.my-div

之后某个时间是否将ready元素添加到DOM中

是这种情况，请研究如何添加.my-div元素/在何处添加JS执行，并将其与该进程而不是$(document).load触发的事件挂钩

无论如何-故障排除代码：

$(document).load(function() {
  setTimeout(function() {
    var $test = $(".my-div").offset();
    console.log($test.top);
    if ($(".my-div").length > 0) {
      console.log('.my-div was able to be located in the DOM, 5s after `$(document).load`');
    }
  }, 5000);
});

Answer 2

您很可能在页面完全加载之前触发了脚本，因此jQuery在执行脚本时找不到该元素。

Tl：DR; 我很少有其他事情可以做，而在wp中，我通常将它们作为经验法则。

指定jQuery而不是$。（wp中的已知问题）
将脚本排入页脚（挂钩wp_footer（）操作）
用jQuery(document).ready(function ($) { ... });包装jQuery触发

更长的解释：

1-在wp中，最好使用jQuery关键字。

这是因为wp在兼容模式下工作，或者默认为noConflict();。

您可以在this问题，this或其他许多信息中找到更多信息。虽然不是您的错误-仍然是一个好习惯。

2- wp_enqueue_script()的语法如下：

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false)

，正如您在最后一个参数$in_footer = false上看到的那样，默认值是在页眉而不是页脚加载脚本。

进行调试以确保脚本最后加载是个好习惯...

3-第三个与代码触发时（并在某种程度上处理第一个）有关。

请参阅this question

$（document）.ready（）和$（window）.load（）之间的区别功能是$（window）.load（）中包含的代码将运行一旦加载了整个页面（图像，iframe，样式表等）而文档就绪事件在所有图像，iframe等之前触发。已加载，但在整个DOM本身准备就绪后

您可以在stackoverflow上找到很多关于它的信息

就您的代码而言：

 wp_enqueue_script( 'my-editor-js', 
    plugins_url( '/src/editor.js', dirname( __FILE__ ) ), 
    array( 'jquery' ), 
    filemtime( plugin_dir_path( __FILE__ ) . '/src/editor.js' ), 
    ,'1.3',TRUE );

其中“ 1.3”可以是任何版本，也可以默认为FALSE 和

   jQuery(document).ready(function ($) {

      var $test = jQuery(".my-div").offset();

      console.log( $test.top );

    });

如果没用的话会让我感到惊讶...

Answer 3

第一个问题是没有与您匹配的jQuery选择器。此外，我强烈建议您不要像这样用$而是用jQuery来编写JS：

jQuery( document ).load(function() {
    var $test = jQuery(".my-div").offset();
});

取决于是加载页眉还是页脚：https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

WordPress Jquery无法读取管理员后端中的偏移量属性

3 个答案: