サポート » プラグイン » Contact Form 7 5.6でjQueryのchange(fn)が正常に動作しない

  • 解決済 JunichiK

    (@junichik)


    いつもお世話になります。

    Contact Form 7を5.5.6.1から5.6にバージョンアップしたところ、jQueryのchange(fn)を使った表示/非表示が効かなくなりました。
    また、チェックボックスまたはラジオボタンをチェックする度に、入力していない必須項目すべてのエラーメッセージ(入力してください)が出てしまいます。

    具体的にchange(fn)では、チェックボックスの選択肢により、他のチェックボックスやテキストエリアにclass付加/削除を行い、cssのdisplay:noneによる表示/非表示を行っていました(下記例)。

    `$(‘.tool-site’).addClass(‘hide’);
    $(‘.tool-hp’).addClass(‘hide’);
    $(‘.tool-other’).addClass(‘hide’);
    $(‘.tool-n input[type=”checkbox”]’).change(function(){
    $(‘.tool-site’).addClass(‘hide’);
    $(‘.tool-hp’).addClass(‘hide’);
    $(‘.tool-other’).addClass(‘hide’);
    $(‘.hp-route-n .wpcf7-list-item:eq(2) input’).prop(‘checked’, true);
    $(‘.hp-route-n .wpcf7-list-item:eq(2)’).removeClass(‘hide’);
    if($(‘.tool-n .wpcf7-list-item:eq(1) input:checkbox:checked’).val() == “テキスト1″) {
    $(‘.tool-site’).removeClass(‘hide’);
    $(‘.tool-site input[type=”text”]’).val(”);
    $(‘.site-name-n input[type=”text”]’).attr(‘placeholder’, ‘テキスト2’);
    $(‘.site-keyword-n input[type=”text”]’).attr(‘placeholder’, ‘テキスト3’);
    } else {
    $(‘.tool-site input[type=”text”]’).val(‘テキスト4’);
    $(‘.tool-site input[type=”text”]’).removeAttr(‘placeholder’);
    }
    if($(‘.tool-n .wpcf7-list-item:eq(4) input:checkbox:checked’).val() == “テキスト5″) {
    $(‘.tool-hp’).removeClass(‘hide’);
    $(‘.hp-route-n .wpcf7-list-item:eq(2) input’).prop(‘checked’, false);
    $(‘.hp-route-n .wpcf7-list-item:eq(2)’).addClass(‘hide’);
    } else {
    $(‘.hp-route-n .wpcf7-list-item:eq(0) input’).prop(‘checked’, false);
    $(‘.hp-route-n .wpcf7-list-item:eq(1) input’).prop(‘checked’, false);
    $(‘.tool-hp .input-wrap’).addClass(‘hide’);
    $(‘div.hp-keyword input[type=”text”]’).val(‘テキスト6’);
    $(‘div.hp-keyword input[type=”text”]’).removeAttr(‘placeholder’);
    $(‘div.hp-other textarea’).val(‘テキスト7’);
    $(‘div.hp-other textarea’).removeAttr(‘placeholder’);
    }
    if($(‘.tool-n .wpcf7-list-item:eq(5) input:checkbox:checked’).val() == “テキスト8″) {
    $(‘.tool-other’).removeClass(‘hide’);
    $(‘.tool-other textarea’).val(”);
    $(‘.tool-other textarea’).attr(‘placeholder’, ‘テキスト9’);
    } else {
    $(‘.tool-other textarea’).val(‘テキスト10’);
    $(‘.tool-other textarea’).removeAttr(‘placeholder’);
    }
    }).trigger(‘change’);`

    5.6にしてから、非表示のままで動作しなくなり、5.5.6.1に戻すと動作します。
    この現象について何かご存じの方がいらっしゃったら、ご教示願います。
    何卒よろしくお願いいたします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 JunichiK

    (@junichik)

    自己解決いたしました。
    プラグインのリリース告知をよく読んでおりませんでした。
    フォームコントロールのマークアップが変更されておりました。
    以下、リリース告知からの引用です。

    フォームコントロールのマークアップの変更

    DOM 操作をより確実にするため、フォームコントロールの HTML マークアップがわずかに変わります。この変更はほとんどのユーザーには影響しませんが、アドオンプラグインやフォームにスタイルを設定するテーマの開発者は注意する必要があるかもしれません。

    新しいマークアップでは data-name=”{field name}” 属性がフォームコントロールのラッパー要素 (wpcf7-form-control-wrap) に追加されます。また、その代わりとして、{field name} クラスがラッパー要素から削除されます。

    お騒がせいたしました。ありがとうございます。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • このトピックに返信するにはログインが必要です。