【WordPress】カスタム投稿での住所入力(カスタムフィールド)を「YubinBango」ライブラリを使って自動化したい

Question

前提・実現したいこと

カスタム投稿に住所登録できるカスタムフィールドを追加しました。
その住所登録を郵便番号を入力すると自動で、
都道府県市町村が入力されるプログラムを作りたいと思っております。

発生している問題

「YubinBango」のライブラリを使って、作ろうと思っておりますがうまく動作しません。
jQueryでaddClass("h-adr")や("p-postal-code")、(
"p-locality p-street-address p-extended-address")などのクラスをinputタグに追加しました。（検証モードで確認済）

しかし、郵便番号を入れても動作しませんでした。
他にもいろいろと検索して対応しましたが、なかなか解決しないのでこちらで質問をさせていただこうと思いました。

カスタムフィールドプラグイン（Advanced Custom Fields）
順序名前：１
ラベル：郵便番号
名前：postcode
Key：field_5e77663ec7915

タイプ：テキスト
順序名前：2
ラベル：都道府県以下
名前：region
Key：field_600a4629f82a6
タイプ：テキスト

// 管理画面で郵便番号検索ライブラリを読み込ませる
function my_admin_script()
{
    wp_enqueue_script('yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true);
    wp_enqueue_script('my_admin_script', get_template_directory_uri().'/admin-postcode.js');
}
add_action('admin_enqueue_scripts', 'my_admin_script');

// 郵便番号検索ライブラリ（YubinBango）を動かす
jQuery(function() {
  jQuery("#acf-group_5e776636233c7")
    .addClass("h-adr")
    .prepend('<span class="p-country-name" style="display:none;">Japan</span>');
  jQuery(".acf-input-wrap #acf-field_5e77663ec7915").addClass("p-postal-code");
  jQuery(".acf-input-wrap #acf-field_600a4629f82a6").addClass(
    "p-locality p-street-address p-extended-address"
  );
});

試したこと

「jQuery(function(){」 ↔　「$(function(){」

補足情報（FW/ツールのバージョンなど）

Wordpress5.6
PHP7.3

Comments

[退会済みユーザー]

webブラウザの開発ツール（やデベロッパーツール）で該当入力欄にイベントリスナーが付与されているか確認していますか？

Answer 1

私も同じ問題で解決に半日要してしまいました。
他のユーザーも指摘の通り、jQueryでaddClass したあと、その要素に対してイベントリスナー'keyup'が登録されないことが原因でした。
そこで、

$(this).find("input.p-postal-code").on("keyup", function () { new YubinBango.MicroformatDom });

```これを追加してやり、イベントリスナーにYubinBangoを追加してやると、動作するようになりました。

jQuery(".acf-input-wrap #acf-field_5e77663ec7915").addClass("p-postal-code");

の下に追加すればイイと思います。

Answer 2

YubinBango
を見ると、
<span class="p-country-name" style="display:none;">Japan</span>
なんていうのがあるのですが、どうやら「p-country-name」というクラスを設定しているところでJapanって書いてないと動作しないようですが、対応されてますか？

.prepend()で足しているつもり、がwebブラウザの
開発ツールやデベロッパーツールなどでチェックしたらいいと思います。
クラスの追加が機能しているか、
html要素の挿入が機能しているか、
イベントリスナーが付与されているか。

Comments

[selfudosan]

<span class="p-country-name" style="display:none;">Japan</span>
は.prepend()で足して開発ツールで付与されているのを確認しております。
クラス追加、HTML追加機能も問題ありませんでした。
イベントリスナーは100個近く付与されており、YubinBangoのイベントを特定が出来ずにおります。
お手数をおかけしますが、ご教示頂けると嬉しいです。
よろしくお願い申し上げます。

[退会済みユーザー]

Chromeのデベロッパーツールなら、入力欄を特定して、「Event Listeners」のkeyupに登録されているのを確認できるはずですが。