jquery - 在 WordPress 中使用 jQuery

Question

WP/jQuery 新手。

我在 WP 中创建了一个简单的表单。不使用插件，只是手动编码。

我现在尝试使用 jQuery 将数据从一个表单字段传递到另一个表单字段。

我已经检查了 jQuery 库是否可用于页面，并且我还使用 wp_enqueue_script 来加载 custom.js 文件。

HTML(在 WP 页面中):

<input id="field_1" name="field_1">

<input id="field_2" name="field_2">

jQuery(在 custom.js 中):

$(document).ready(function () {
    $('#field_1').change(function () {
        $('#field_2').val($(this).val());
    });
});

我已经在 HTML 页面中测试了代码(在 WP 之外，它确实有效。

我想知道是否有人可以告诉我我做错了什么？为什么不起作用？

Answer 1

The tricky thing is this particular copy of jQuery is in compatibility mode by default. That means that the typical '$' shortcut for jQuery doesn't work, so it doesn't conflict with any other JavaScript libraries that use the dollar sign also, like MooTools or Prototype.

取自:https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

您可以按如下方式使用jQuery:

jQuery(document).ready(function ($) {
    $('#field_1').change(function () {
        $('#field_2').val($(this).val());
    });
});

编辑

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

在noConflict()模式下，jQuery的全局$快捷方式不可用

文档:http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers